ember.js - 通过 sortProperty mixin 对 Ember-Data 支持的 ArrayController 进行排序

Question

我希望能够对内容来自 ember-data 查询的 ArrayController 进行排序。不幸的是，sortProperty mixin 在这种情况下似乎不起作用。

我希望能够执行以下操作:

App = Ember.Application.create();
App.store = DS.Store.create({ revision: 4});

App.Item = DS.Model.extend({
    id: DS.attr('string'),
    name: DS.attr('string')
});

App.store.createRecord(App.Item, {id: '4', name: 'banana' });
App.store.createRecord(App.Item, {id: '2', name: 'apple'});
App.store.createRecord(App.Item, {id: '6', name: 'spaghetti'}); 

App.ItemsController = Ember.ArrayController.create({
    content: App.store.findAll(App.Item),
    sortProperties: ['name']
});

使用最新版本的 Ember 和 Ember-data，输出如下:

[ id: 4, name: banana ]

[ id: 2, name: apple ]

[ id: 6, name: spaghetti ]

这里的问题是 App.store.findAll() 返回一个 RecordArray ，其内容属性不仅仅是一个 App.Item 数组> 实例(在本例中，内容为 [2, 3, 4])

要真正获得实例，我需要使用诸如 objectAt() 之类的东西。但即使我从 RecordArray 中提取 App.Item 实例并将它们转储到普通数组中，事情也不会按预期工作。

我是否错过了执行此操作的明显方法，或者这只是框架的当前状态？我宁愿不必将所有模型复制为普通对象只是为了对它们进行排序。

编辑:

我通过制作自己的自定义ArrayController解决了这个问题。不过，如果事情能像上面那样工作那就太好了。

编辑＃2:

原始 Handlebars 模板:

<script type="text/x-handlebars">
    {{#each App.ItemsController.content }}
        <p>[ id: {{id}}, name: {{name}} ]</p>
    {{/each}}
</script>

(此外，我在上面的代码中使用了 sortProperty 属性而不是 sortProperties，但这只是一个拼写错误。)

是的，如果有人使用

<script type="text/x-handlebars">
    {{#each App.ItemsController.arrangedContent }}
        <p>[ id: {{id}}, name: {{name}} ]</p>
    {{/each}}
</script>

然后我们就得到了我们想要的:

[ id: 2, name: apple ]

[ id: 4, name: banana ]

[ id: 6, name: spaghetti ]

Answer 1

我也遇到了同样的问题。我花了一段时间，但最终这个通用解决方案解决了它:

App.ArrayController = Ember.ArrayController.extend({
  sortProperties: ['id'],
  sortAscending: true,

  sortedContent: (function() {
    var content;
    content = this.get("content") || [];
    return Ember.ArrayProxy.createWithMixins(Ember.SortableMixin, {
      content: content.toArray(),
      sortProperties: this.get('sortProperties'),
      sortAscending: this.get('sortAscending')
    });
  }).property("content.@each", 'sortProperties', 'sortAscending'),

  doSort: function(sortBy) {
    var previousSortBy;
    previousSortBy = this.get('sortProperties.0');
    if (sortBy === previousSortBy) {
      return this.set('sortAscending', !this.get('sortAscending'));
    } else {
      set('sortAscending', true);
      return this.set('sortProperties', [sortBy]);
    }
  }
});

现在我的大多数 ArrayController 都扩展了 App.ArrayController 而不是 Ember.ArrayController，特别是那些具有 Ember/Data RecordArray 的 ArrayController作为内容。

现在，在 Handlebars 模板中执行以下操作:

 {{#each item in sortedContent}}
   ...          
 {{/each}}

而不是

 {{#each item in content}}
   ...          
 {{/each}}