Ember - 如何使用新模型订购 ArrayController

Question

我有一个 ArrayController（类别），其中包含许多 ObjectController（类别）。每个类别都有一个名为“category_order_nm”的属性。我已经设置了我的

App.CategoriesController = Ember.ArrayController.extend({
    itemController: 'category',
    sortAscending: true,
    sortProperties: ['category_order_nm']
});

到目前为止一切顺利！我的商店从我的 API 中获取我的所有类别，并按照应有的方式对其进行排序。现在，当我的用户单击“添加”时，它就变成了 Edgy。我可以根据需要添加任意数量的类别，它们会排序，但仅限于新类别中，就像它们是一个完全不同的数组一样。让我给你看一个例子来澄清。我有这些缩写类别：

Category1 category_order_nm : 10
Category2 category_order_nm : 11
Category3 category_order_nm : 12

我添加了这些类别

Category4 category_order_nm : 3
Category5 category_order_nm : 2
Category6 category_order_nm : 1

它们将按以下顺序显示：

Category1 category_order_nm : 10
Category2 category_order_nm : 11
Category3 category_order_nm : 12
Category6 category_order_nm : 1
Category5 category_order_nm : 2
Category4 category_order_nm : 3

最后可能有用的信息。当用户点击我的路线 CategoriesAddRoute。发生这种情况：

App.CategoriesAddRoute = Ember.Route.extend({
    setupController: function(controller) {
        controller.newRecord();
    },
)};

App.CategoriesAddController = Ember.ObjectController.extend({   
    needs: ['categories'],
    newRecord: function() {
        record = this.store.createRecord( 'category', 
                                          {
                                              id: 4,
                                              category_active_bo: true,
                                              category_name_fr_sh: 'Nouvelle categorie',
                                              category_order_nm: 0,
                                          }
                                        );
        alert(this.get('controllers.categories').get('length')) // Given our previous example: 6
        this.get('controllers.categories').pushObject(record);
        alert(this.get('controllers.categories').get('length')) // Given our previous example: 7
        this.set('content', record);
    },
 )};

编辑：这是我的模板：

<script data-template-name="categories-template" type="text/x-handlebars">
        <li class="list-group-item" data-toggle="collapse" {{bindAttr data-target="category_collapse"}}>
            {{ category_name_fr_sh }}
            <button type="button" {{action destroyRecord this}}  class="btn btn-sm btn-danger pull-right">Effacer</button>
            <button type="button" class="btn btn-sm btn-success pull-right">Modifier</button>
        </li>  
    {{#if category_children_ids}}     
        <div {{bindAttr id="category_collapse_target"}} class="collapse">
            {{#each category_children_ids}}
                {{render "categories-template" this}}
            {{/each}}
        </div>
    {{/if}} 
</script>
<script type="text/x-handlebars" data-template-name="categories">
    <div class="col-md-3">
        {{#link-to 'categories.add' tagName="button" class="btn btn-sm btn-primary"}}Ajouter{{/link-to}}
        <ul class="list-group">                          
            {{#each category in controller}}
                {{{render "categories-template" this}}}
            {{/each}}
        </ul>
    </div>
    <div class="col-md-6">
        <div id="content">
            {{outlet}}
        </div>
    </div>
</script>

Answer 1

ArrayController 扩展了 Sortable mixin，你可以简单地做这样的事情：

songsController = Ember.ArrayController.create({ 内容：歌曲， 排序属性：['trackNumber']， 排序升序：真 });

http://emberjs.com/api/classes/Ember.SortableMixin.html