Performing a nested grouping in Ember.js - ember.js

Question

I need to perform nested grouping on my model in order to display it.
Here is the desired output I need:
---- Today ----
-- Thread 1
- Activity 1
- Activity 2
-- Thread 2
-- Activity 1
---- Yesterday ----
-- Thread 1
- Activity 1
- Activity 2
-- Thread 2
- Activity 1
I am not able to figure out an optimal way to achieve this. I need help developing a proper controller and view / template.
Here is my bare-minimum app setup with fixtures so that you have more idea about my models.
(function($, Ember) {
'use strict';
var App = Ember.Application.create({
rootElement: '#app-container'
});
App.Store = DS.Store.extend({
revision: 13,
adapter: DS.FixtureAdapter
});
App.Thread = DS.Model.extend({
title: DS.attr('string'),
url: DS.attr('string'),
kind: DS.attr('string'),
lastActivityOn: DS.attr('date'),
activities: DS.hasMany('activity')
});
App.Activity = DS.Model.extend({
kind: DS.attr('string'),
date: DS.attr('date'),
performer: DS.belongdTo('user'),
thread: DS.belongsTo('thread')
});
App.User = DS.Model.extend({
userName: DS.attr('string'),
displayName: DS.attr('string'),
profilePicUrl: DS.attr('string'),
activities: DS.hasMany('activity')
});
App.Thread.FIXTURES = [
{
id: '958173B3-EA1C-4E06-873A-038097A65E2F',
title: 'SE01',
url: '/sites/moon551/se01',
kind: 'Workspace',
lastActivityOn: '2014-03-01 10:46:31.4000000'
},
{
id: '9B45E3F0-13FD-48BE-83ED-F3C096C3BCC2',
title: 'To Do',
url: '/sites/moon551/se02/lists/todo',
kind: 'List',
lastActivityOn: '2014-02-28 11:46:31.4000000'
},
{
id: '6E6E4EE4-5568-49B3-B9E2-66CD60BA6CAC',
title: 'Design UX',
url: '/sites/moon551/se03/lists/todo/1',
kind: 'ListItem',
lastActivityOn: '2014-02-27 12:46:31.4000000'
}
];
App.Activity.FIXTURES = [
{
id: '37D7CBCD-0299-4203-8BF0-1B2DB676467F',
kind: 'Created',
date: '2014-03-01 10:30:31.4000000',
performer: 1073741823,
thread: '958173B3-EA1C-4E06-873A-038097A65E2F'
},
{
id: 'C378CD09-388C-403C-8558-3A1D6B5DCD97',
kind: 'Updated',
date: '2014-03-01 10:46:31.4000000',
performer: 1073741823,
thread: '958173B3-EA1C-4E06-873A-038097A65E2F'
},
{
id: 'C6B68036-7543-466F-85AF-141DB4874F75',
kind: 'Created',
date: '2014-02-28 11:30:31.4000000',
performer: 1073741823,
thread: '9B45E3F0-13FD-48BE-83ED-F3C096C3BCC2'
},
{
id: 'C378CD09-388C-403C-8558-3A1D6B5DCD97',
kind: 'Updated',
date: '2014-02-28 11:46:31.4000000',
performer: 1073741823,
thread: '9B45E3F0-13FD-48BE-83ED-F3C096C3BCC2'
},
{
id: 'C064010D-2603-4E28-9DE5-568212F1EFCA',
kind: 'Created',
date: '2014-02-27 12:30:31.4000000',
performer: 1073741823,
thread: '6E6E4EE4-5568-49B3-B9E2-66CD60BA6CAC'
},
{
id: '3C449D67-F231-4DB1-8D4D-AE0C39DB4E5D',
kind: 'Updated',
date: '2014-02-27 12:46:31.4000000',
performer: 1073741823,
thread: '6E6E4EE4-5568-49B3-B9E2-66CD60BA6CAC'
}
];
App.User.FIXTURES = [
{
id: 1073741823,
userName: 'Administrator',
displayName: 'System Account'
}
];
App.IndexController = Ember.ArrayController.extend();
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('activity');
}
});
})(jQuery, Ember);
Here is an actual mock-up:

Answer 1

I'm an emberjs noob so take this answer for what it is. I was in a similar situation where I needed to group posts by dates (Year,Month,Day). I used moment.js to extract the days. Here is how I did it.
I was getting data from the server that looked like this :
{
"idea": [{
"_id": "548c7362b9b39b8305000001",
"newTitle": null,
"body": "test",
"date": "2014-12-13T17:12:02.415Z"
}, {
"_id": "548c785c94e310a905000001",
"newTitle": null,
"body": "this is my awesome idea\n",
"date": "2014-12-13T17:33:16.316Z"
}, {
"_id": "548c786e94e310a905000002",
"newTitle": null,
"body": "this is my awesome \n\nanother awesome idea\n",
"date": "2014-12-13T17:33:34.214Z"
}, {
"_id": "548cafb494e310a905000003",
"newTitle": null,
"body": "mii\n",
"date": "2014-12-13T21:29:24.934Z"
}]
}
My Emberjs Route looked like this
saveIdea.IdeasRoute = Ember.Route.extend({
model: function () {
return this.store.find('idea',{page:1,skip:1});
}
});
And My Emberjs controller is the following. I'm using moment.js to extract and format the year, month and day of my dates.
saveIdea.IdeasController = Ember.ArrayController.extend({
test : Ember.computed('content', function() {
var results = {}
var result = [];
this.get('content').forEach(function(item){
var date = item.get('date');
var month = moment(date).format('MMMM');
var year = moment(date).format('YYYY');
var day = moment(date).format('DD');
var dayOfWeek = moment(date).format('dddd');
var time = moment(date).format('LT');
var body = item.get('body');
var groupYear = result.findBy('year',year);
if(!groupYear)
{
result.pushObject(Ember.Object.create({
year: year,
months: []
}));
}
var groupMonths = result.findBy('year',year).months.findBy('month',month);
if(!groupMonths)
{
result.findBy('year',year).months.pushObject(Ember.Object.create({
month: month,
days: []
}));
}
var groupDays = result.findBy('year',year).months.findBy('month',month).days.findBy('day',day);
if(!groupDays)
{
result.findBy('year',year).months.findBy('month',month).days.pushObject(Ember.Object.create({
day: day,
ideas: []
}));
}
result.findBy('year',year).months.findBy('month',month).days.findBy('day',day).ideas.pushObject(Ember.Object.create({
idea: body,
time: time,
dayOfWeek :dayOfWeek
}));
});
return result
})
});
Then in my view, I just looped through the contents of the computed test variable.
I'm not sure how efficient this approach is, but it works just fine for me. You can use this approach to perform your nested grouping.