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

Question

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

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

它从 MyData 接收数据。在我的数据中，我有一个名为“NAME”的字段。我想按名称按升序显示来自 MyData 的数据。

我添加了一个控制器（谢谢。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>

Answer 4

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

确保你的 find 方法做这样的事情

App.Person.reopenClass({
    people: [],
    find: function() {
        var self = this;
        $.getJSON('/api/people', function(response) {
            response.forEach(function(hash) {
                var person = App.Person.create(hash);
                Ember.run(self.people, self.people.pushObject, person);
            });
        }, this);
        return this.people;
    }
});

不是这个（这不会通过绑定更新模板，因为它是一个普通的 JS 对象而不是一个完整的 ember 对象）

App.Person.reopenClass({
    people: [],
    find: function() {
        var self = this;
        $.getJSON('/api/people', function(response) {
            response.forEach(function(hash) {
                Ember.run(self.people, self.people.pushObject, hash);
            });
        }, this);
        return this.people;
    }
});