我有一个数组,想要将其中的项进行分组并以这种方式显示。这非常令人困惑:
App.GroupedThings = Ember.ArrayProxy.extend({
init: function(modelToStartWith) {
this.set('content', Ember.A());
this.itemsByGroup = {};
modelToStartWith.addArrayObserver(this, {
willChange: function(array, offset, removeCount, addCount) {},
didChange: function(array, offset, removeCount, addCount) {
if (addCount > 0)
// Sort the newly added items into groups
this.add(array.slice(offset, offset + addCount))
}
});
},
add : function(things) {
var this$ = this;
// Group all passed things by day
things.forEach(function(thing) {
var groupKey = thing.get('date').clone().hours(0).minutes(0).seconds(0);
// Create data structure for new groups
if (!this$.itemsByGroup[groupKey]) {
var newArray = Ember.A();
this$.itemsByGroup[groupKey] = newArray;
this$.get('content').pushObject({'date': groupKey, 'items': newArray});
}
// Add to correct group
this$.itemsByGroup[groupKey].pushObject(thing);
});
}
});
App.ThingsRoute = Ember.Route.extend({
model: function() {
return new App.GroupedThings(this.store.find('thing'));
},
});
只有在使用以下模板时才能实现这个功能:
{{#each model.content }}
这些不会渲染任何内容(使用了ArrayController):
{{#each model }}
{{#each content }}
{{#each}}
为什么?ArrayController不应该代理到“model”(即GroupedThings),而“model”应该代理到“content”吗?
这个问题的原因是,我想要对这些分组进行排序,但只要我更改整个contents数组(即使使用ArrayProxy.replaceContent()),整个视图都会被重建,即使只添加一个单独的项到一个单独的组中。
是否有完全不同的方法来解决这个问题?