Ember.js CollectionView 顺序 [英] Ember.js CollectionView order

问题描述

我有一个定期更新的 ArrayController.它有一个 sorted 计算属性，可以使事情井然有序.我正在尝试使用 CollectionView 和它的 content 属性绑定到 sorted 属性，但它没有以正确的顺序呈现它们.演示

I have an ArrayController which is periodically updated. It has a sorted computed property which keeps things in order. I'm trying to use a CollectionView with it's content property bound to the sorted property, but it's not rendering them in the correct order. demo

我显然错误地假设了 content 和 childViews 属性之间的顺序.这样做的正确方法是什么?

I've obviously made the false assumption that order is maintained between the content and childViews property. What is the correct way to do this?

把手:

<script type="text/x-handlebars" data-template-name="item">
    id {{view.content.id}}
</script>

<script type="text/x-handlebars">
    <ul>
     {{collection
        contentBinding="App.itemController.sorted"
        itemViewClass="App.ItemView"
    }} 
    </ul>        
</script>

JavaScript:

​App = Ember.Application.create({
    ready: function(){

        // add a new object with a random id
        // every second
        setInterval(function(){

            var id = Math.round(Math.random() * 100),
                obj = Em.Object.create({ id: id });
            App.itemController.pushObject(obj);

        }, 1000);

    }
});

// Collection Item View
App.ItemView = Em.View.extend({
    tagName: "li",
    templateName: "item"
});

App.itemController = Em.ArrayController.create({

    // random order
    content: Em.A([
        Em.Object.create({ id: 5 }),
        Em.Object.create({ id: 3 }),
        Em.Object.create({ id: 10 }),
        Em.Object.create({ id: 6 }),
        Em.Object.create({ id: 1 }),
        Em.Object.create({ id: 2 }),
        Em.Object.create({ id: 100 }),
    ]),

    // filtered content
    sorted: function(){
        return this.get('content').sort(function(a,b){
            return a.get('id') - b.get('id');
        });
    }.property("@each")

});

推荐答案

为了@sly7_7 正确答案的完整性，这里有一个带有 CollectionView 的版本，参见 http://jsfiddle.net/pangratz666/ctPAA/.

For the sake of completeness to @sly7_7's correct answer, here is a version with CollectionView, see http://jsfiddle.net/pangratz666/ctPAA/.

把手:

<script type="text/x-handlebars">
    {{collection
        tagName="ul"
        contentBinding="App.itemController"
        itemViewClass="App.ItemView" }} 
</script>

JavaScript:

App.itemController = Em.ArrayController.create({

    sortProperties: 'id'.w(),

    // random order
    content: Em.A([
        ...
    ])

});

这篇关于Ember.js CollectionView 顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！