Ember.js分组结果 [英] Ember.js Grouping Results
问题描述
[{date：'2014-01-15T16：22：16-08：00'，message：'Tidal wave occurred'}，
{date：'2014-01-15T05：00：16- 08:00'，消息：'龙卷风毁灭的城镇'}，
{date：'2014-01-13T14：22：16-08：00'，消息：'火山喷发，可能'}，
{date：'2014-01-13T16：24：16-08：00'，消息：'冰架阉割完全'}，
{date：'2014-01-11T11：27：26-08 ：00'，消息：'婆婆拜访'}
我在寻找最终输出类似于此：
今天
----------
4 ：22点 - 潮汐发生
5:00 am - 龙卷风被毁坏的城镇
星期一
----------
2:22 pm - 火山爆发，可能
...等等
现在这个数据绑定到一个ArrayController。每个对象都有一个计算属性来获取分组比较的年/月/日。
var ActivityController = Em.ArrayController .extend（{
groupingResults：function（）{
var result = [];
//迭代列表中的每个项目，它是
this.get（'content'）。filter（function（item）{
}）;
返回结果;
}。财产（'content。[]'）
}）;
有哪些提示可以实现这一点？ Ember装有filterBy和mapBy，但没有groupBy。
这是一个可以分组的实现，我已经改编了一下：
Groupable = Ember.Mixin.create
group：null
ungroupedContent：null
groupsContent：（ - >
model = @
groupingContent = Ember.A（[]）
groupCallback = @get（'group'）
ungroupedContent = get（'ungroupedContent'）
返回groupingContent，除非groupCallback
返回groupingContent，除非ungroupedContent
ungroupedContent.forEach（item） - >
group = groupCallback .call（model，item）
return除了groupKey = group.get（'key'）
foundGroup = groupingContent.findProperty（'group.key'，groupKey）
除非foundGroup
foundGroup = groupingContent.pushObject Ember.ArrayProxy.create
group：group，
content：Ember.A（ []）
foundGroup.get（'content'）。pushObject（item）
groupingContent
）.property（'group'，'ungroupedContent。 '）
控制器使用情况：
ActivitiesController = Ember.ArrayController.extend可分组，
ungroupedContentBinding：'content'＃告诉Groupable您的默认内容是
＃将要调用的回调每个
＃项目在您的内容数组 -
＃只返回相同的'键'将它放在同一组
组：（活动） - >
Ember.Object.create
key：moment.utc（activity.get（'date'））。format（'YYYY-MM-DD'）＃使用momentjs从日期开始的日子
描述：'描述这个组的一些字符串（如果你想要的）'
模板用法： / p>
{{＃each groupingContent}}
{{group.key}} - {{group.description}}
{{#each content}}
这是发生的非常糟糕的事情：{{message}}
{{/ each}}
{{/ each} }
本质上，Groupable mixin所做的一切都是循环遍历正常的内容ArrayProxy并调用一个函数确定它属于哪个组。如果该组对象不存在（即，找不到匹配的 group.key ），则在将当前内容项添加到组的 content。
所以你最终在你的模板中是一个新的数组（ ArrayProxy ）的对象（ Ember.Object ），每个对象都有一个组属性（必须至少有一个 key 属性以标识它）和内容属性（其中包含属于该组的内容）。
I'm trying to achieve a "group by" functionality in Ember.js and its proving more difficult than I originally thought.
[{date: '2014-01-15T16:22:16-08:00', message: 'Tidal wave occurred'},
{date: '2014-01-15T05:00:16-08:00', message: 'Tornado destroyed town'},
{date: '2014-01-13T14:22:16-08:00', message: 'Volcanic eruption, likely'},
{date: '2014-01-13T16:24:16-08:00', message: 'Ice shelf calving off completely'},
{date: '2014-01-11T11:27:26-08:00', message: 'Mother-in-law visiting'}]
I'm looking for final output similar to this:
Today
----------
4:22 pm - Tidal wave occurred
5:00 am - Tornado destroyed town
Monday
----------
2:22 pm - Volcanic eruption, likely
...etc., etc.
Right now this data is bound to an ArrayController. Each object has a computed property to get "year/month/day" for the grouping comparison.
var ActivityController = Em.ArrayController.extend({
groupedResults: function () {
var result = [];
//Iterate over each item in the list, but do what with it?
this.get('content').filter(function (item) {
});
return result;
}.property('content.[]')
});
Any tips on the best way to implement this? Ember ships with filterBy and mapBy, but no groupBy.
Here's a Groupable implementation I've adapted a bit:
Groupable = Ember.Mixin.create
group: null
ungroupedContent: null
groupedContent: (->
model = @
groupedContent = Ember.A([])
groupCallback = @get('group')
ungroupedContent = @get('ungroupedContent')
return groupedContent unless groupCallback
return groupedContent unless ungroupedContent
ungroupedContent.forEach (item) ->
group = groupCallback.call(model, item)
return unless groupKey = group.get('key')
foundGroup = groupedContent.findProperty('group.key', groupKey)
unless foundGroup
foundGroup = groupedContent.pushObject Ember.ArrayProxy.create
group: group,
content: Ember.A([])
foundGroup.get('content').pushObject(item)
groupedContent
).property('group', 'ungroupedContent.@each')
Controller usage:
ActivitiesController = Ember.ArrayController.extend Groupable,
ungroupedContentBinding: 'content' # tell Groupable where your default content is
# the callback that will be called for every
# item in your content array -
# just return the same 'key' to put it in the same group
group: (activity) ->
Ember.Object.create
key: moment.utc(activity.get('date')).format('YYYY-MM-DD') # using momentjs to pluck the day from the date
description: 'some string describing this group (if you want)'
Template usage:
{{#each groupedContent}}
{{group.key}} - {{group.description}}
{{#each content}}
Here's the really bad thing that happened: {{message}}
{{/each}}
{{/each}}
Essentially, all that the Groupable mixin does is loop through your normal content ArrayProxy and calls a function to determine what group it belongs to. If that group object doesn't already exist (i.e. no matching group.key was found), it creates it before adding the current content item to the group's content.
So what you end up with in your template is a new array (ArrayProxy) of objects (Ember.Object), with each object having a group property (which must have at least a key property to identify it) and a content property (which contains the content belonging to that group).
这篇关于Ember.js分组结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
