如何在Ember.js中对模型进行排序？

Question

我在Ember.js中使用了这样的模型:

App.SomethingRoute = Ember.Route.extend({
  model: function()
  {
      return App.MyData.find();
  }
});

它从MyData接收数据.在我的数据中,我有一个名为"NAME"的字段.我想通过NAME以升序显示来自MyData的数据.

我添加了一个控制器(thx.Toran,直观),如下所示:

App.SomethingController = Ember.ArrayController.extend({
  sortProperties: ['NAME'],
  sortAscending: true
});

但我的模板是这样的:

{{#each model}}
 {{NAME}}
{{/each}}

仍显示无序列表.怎么做对了？

Answer 1

ArrayController自问这个问题以来,已从Ember(v2.0)中删除.以下是如何在不使用以下情况下实现相同的目标ArrayController:

export default Ember.Controller.extend({
  sortProperties: ['name:asc'],
  sortedModel: Ember.computed.sort('model', 'sortProperties')
});

然后:

{{#each sortedModel as |thing|}}
 {{thing.name}}
{{/each}}

而这里是文档的Ember的计算sort宏.

Answer 2

由于ArrayController包含SortableMixin(已经在@ianpetzer的评论中提到),您可以设置要排序的属性sortProperties.

App.SomethingController = Ember.ArrayController.extend({
  sortProperties: ['name'],
  sortAscending: true
});

Answer 3

确保您使用的是{{#each controller}},而不是{{#each model}},因为Controller将拥有自己的模型集合副本,并将其排序并呈现给模板.

<!-- ************************************************************************ -->
<script type="text/x-handlebars" data-template-name="tickets">  
<p>
<table id="tickets" class="table table-striped">
<thead>
  <tr>    
    <th {{action "sortByAttribute" "status"}}>Status</th>
  </tr>
</thead>
<tbody>
{{#each controller}}
    <tr>     
      <td>{{#link-to 'ticket' this.id}} {{status}} {{/link-to}} </td>
    </tr>
{{/each}}
</tbody>
</table>  
</p>
</script>