[英]Ember.js: Group a model (using ArrayProxy)
我有一個數組,其項目我想分組,然后以這種分組方式顯示。 這一切都非常令人困惑:
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代理轉換為“模型”(這是GroupedThings),它應該代理到“內容”?
這成為一個問題的原因是我想要對這些組進行排序,一旦我更改整個內容數組(甚至使用ArrayProxy.replaceContent()),整個視圖就會重建,即使只添加了一個項目一個小組。
完全有不同的方法嗎?
在做這些事情時,我傾向於稍微使用ArrayProxies。 我可能會讓Ember做所有繁重的工作,並且為了排序讓它根據內容集創建ArrayProxies,這樣你就可以自動對它們進行排序:
(注意我沒有運行此代碼,但它應該將你推向正確的方向)
App.GroupedThings = Em.ArrayProxy.extend({
groupKey: null,
sortKey: null,
groupedContent: function() {
var content = this.get('content');
var groupKey = this.get('groupKey');
var sortKey = this.get('sortKey');
var groupedArrayProxies = content.reduce(function(previousValue, item) {
// previousValue is the reduced value - ie the 'memo' or 'sum' if you will
var itemGroupKeyValue = item.get('groupKey');
currentArrayProxyForGroupKeyValue = previousValue.get(itemGroupKeyValue);
// if there is no Array Proxy set up for this item's groupKey value, create one
if(Em.isEmpty(currentArrayProxyForGroupKeyValue)) {
var newArrayProxy = Em.ArrayProxy.createWithMixins(Em.SortableMixin, {sortProperties: [sortKey], content: Em.A()});
previousValue.set(itemGroupKeyValue, newArrayProxy);
currentArrayProxyForGroupKeyValue = newArrayProxy;
}
currentArrayProxyForGroupKeyValue.get('content').addObject(item);
return previousValue;
}, Em.Object.create());
return groupedArrayProxies;
}.property('content', 'groupKey', 'sortKey')
);
然后你就像這樣創建一個GroupedThings實例:
var aGroupedThings = App.GroupedThings.create({content: someArrayOfItemsThatYouWantGroupedThatHaveBothSortKeyAndGroupKeyAttributes, sortKey: 'someSortKey', groupKey: 'someGroupKey'});
如果你想獲得分組內容,你只需要獲得你的實例並獲得。('groupsContent')。 簡單! :)
...它只會保持分組和排序(計算屬性的強大功能)...如果你想要一個'add'方便方法,你可以在上面添加一個Em.Object.Extend def,但你可以像很容易使用Em.ArrayProxy中的原生代碼,這是更好的恕我直言:
aGroupedThings.addObjects([some, set, of, objects]);
要么
aGroupedThings.addObject(aSingleObject);
H2H
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.