Ember.js:对模型进行分组(使用ArrayProxy)
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'});
如果你想得到groupedContent,你只需要得到你的实例并得到。("分组内容")。简单!:)
它将保持分组和排序(计算属性的力量)。。。如果你想要一个"添加"方便的方法,你可以在上面的Em.Object.Extend-def中添加一个,但你也可以很容易地使用Em.ArrayProxy中的本地方法,它们更好IMHO:
aGroupedThings.addObjects([some, set, of, objects]);
或
aGroupedThings.addObject(aSingleObject);
H2H
相关文章:
- 在指令控制器中使用$attrs时出现问题
- 如何使用jQuery自动打开页面上的所有链接
- 如何使用url加载程序在webpack中导入多个图像
- 使用php或javascript从facebook相册URL中删除多余的部分
- 正在添加'X'按钮,在文本字段旁边使用javascript
- 如何使用jquery在填充自动完成的值后使文本框只读
- 使用agility.js进行页面布局和合成
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何使用WCF服务和javascript表单post上传.doc文件
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 如何使用动画实现纸张推车
- 如何在Angular2中使用jQuery插件
- 使用Express捕获参数
- 使用clickToggle并在单击另一个元素时关闭元素
- 如何使用jQuery选择下拉列表的值
- 可以前端maven插件使用节点,npm已经安装
- 使用javascript将动态表从一个html页面打印到另一个html页
- 使用JS将数组转换为json对象
- Ember.js:对模型进行分组(使用ArrayProxy)