对 ArrayController 的内容进行排序

Question

我有一个 Ember.ArrayController 包含未排序的内容。

我想知道是否可以在不使用新属性的情况下对 ArrayController 的内容进行排序。

我当然可以创建一个新属性：

App.MyArrayController = Em.ArrayController.extend({
  mySortMethod: function(obj1, obj2) {
    // some code here
  },
  updateSortedContent: function() {
    var content = this.get('content');
    if (content) {
      var sortedContent = content.copy();
      sortedContent.sort(this.mySortMethod);
      this.set('sortedContent', sortedContent);
    }
  }.observes('content')
});

但我希望有更好的方法，不重复内容。

Answer 1

更新

Ember 的最新版本实际上内置了排序功能。ArrayController 现在包括Ember.SortableMixin，如果您指定sortProperties（数组）和可选的sortAscending（布尔值），它将参与。

注意：使用新的 SortableMixin，您仍然需要参考 arrangedContent 来获取排序后的版本。模型本身将保持不变。 （感谢 Jonathan Tran）

App.userController = Ember.ArrayController.create({
  content: [],
  sortProperties: ['age'],
  sortAscending: false
})

原始答案

正确的方法是使用 ArrayProxy 的arrangedContent 属性。此属性旨在被覆盖以提供内容数组的排序或过滤版本。

App.userController = Ember.ArrayController.create({
  content: [],
  sort: "desc",
  arrangedContent: Ember.computed("content", function() {
    var content, sortedContent;
    content = this.get("content");
    if (content) {
      if (this.get("sort") === "desc") {
        this.set("sort", "asc");
        sortedContent = content.sort(function(a, b) {
          return a.get("age") - b.get("age");
        });
      } else {
        this.set("sort", "desc");
        sortedContent = content.sort(function(a, b) {
          return b.get("age") - a.get("age");
        });
      }
      return sortedContent;
    } else {
      return null;
    }
  }).cacheable()
});

Answer 2

您必须在 Ember 中手动对数组进行排序，包括任何数组控制器的内容。您始终可以将 content 替换为已排序的数组，而不是保留两个数组。

更新

这是我认为您正在寻找的示例：http://jsfiddle.net/ud3323/yjs8D/

更新 #2

更新了此示例以使用新的视图上下文更改。 https://gist.github.com/2494968

车把

<script type="text/x-handlebars" >
Will Display and Sort by Age (after 2 sec)<br/><br/>

{{#each App.userController}}
    {{#view App.RecordView}}
        {{name}} - {{age}}
    {{/view}}
{{/each}}
</script>

JavaScript

App = Ember.Application.create({
    ready: function() {
        Ember.run.later(this, function() {
            Ember.run.later(this, function() {
                App.get('userController').set('content', [
                   Ember.Object.create({ name:"Jeff", age:24 }),
                   Ember.Object.create({ name:"Sue", age:32 }),
                   Ember.Object.create({ name:"Jim", age:12 })
               ]);
      }, 2000);
        Ember.run.later(this, function() {
            // Make the controller's content sort again in reverse this time
            App.userController.notifyPropertyChange('content');
        }, 4000);
    }
});

App.userController = Ember.ArrayController.create({
    content: [],

    contentDidChange: Ember.observer(function(userCtr, prop) {
        if(!Ember.empty(this.get('content'))) {
            console.log('about to begin sort');
            this.sortContent();
        }

        this._super();
    }, 'content'),

    sort:"desc",

    sortContent:function() {
        var content = this.get("content"), sortedContent;

        if (this.get("sort") == "desc") {
            this.set("sort", "asc");
            sortedContent = content.sort( function(a,b){
                return a.get("age") - b.get("age");
            });
        } else {
            this.set("sort","desc");
            sortedContent = content.sort( function(a,b){
                return b.get("age") - a.get("age");
            });
        }

        this.set("content",sortedContent);
    }
});

App.RecordView = Ember.View.extend({});

​