javascript - Ember.jsCollectionViewの注文

Question

ArrayController定期的に更新されるものがあります。それはsorted物事を整然と保つ計算された特性を持っています。プロパティがプロパティにバインドされたCollectionView状態でを使用しようとしていますが、正しい順序でレンダリングされていません。デモcontentsorted

私は明らかに、contentとchildViewsプロパティの間で順序が維持されているという誤った仮定をしました。これを行う正しい方法は何ですか？

ハンドルバー：

<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")

});

</ p>

Answer 1

@ sly7_7の正解を完全にするために、ここにバージョンがあります。http：//jsfiddle.net/pangratz666/ctPAA/を参照CollectionViewしてください。

ハンドルバー：

<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([
        ...
    ])

});

Answer 2

この回答に触発されました：ember.js＃プロパティごとの各注文

ArrayControllerの並べ替えプロパティを使用します：https ：//github.com/emberjs/ember.js/blob/master/packages/ember-runtime/lib/mixins/sortable.js

私はCollectionViewを使用しませんが、単純な#eachを使用し、pushObjectの代わりにaddObjectを呼び出します

レンプレート

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

<script type="text/x-handlebars" data-template-name="application">
    <ul>
     {{#each item in App.itemController}}
        {{view App.ItemView contentBinding="item"}}
     {{/each}} 
    <li>        
</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 });
        // should call addObject, because pushObject does not sort the inserted item
        //App.itemController.pushObject(obj); 
        App.itemController.addObject(obj);
    }, 1000);
  }       
});

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

App.itemController = Em.ArrayController.create({
  sortProperties: ['id'],
  // 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 }),
  ]),
});
App.ApplicationView = Ember.View.extend({
  templateName: 'application'
});
App.ApplicationController = Ember.Controller.extend();
App.Router = Ember.Router.extend({root: Em.Route.extend()});
App.initialize();​

jsfiddle： http: //jsfiddle.net/Sly7/LJAYk/