Reputation: 657
I am trying to split an ember store record into 3 columns for display purposes. I am attempting to do this in a controller action but I have a feeling this is wrong due to the way promises are filled.
Gist of how I would like my data to look (handlebar friendly).
var events = [
{column: ['work1','work2','work3']},
{column: ['priv1','priv2','priv3']},
{column: ['mail1','mail2','mail3']}
];
Below is the code I am running. When I attempt to arrange the events into a different object no data is stored.
//app/controllers/index.js
import Ember from 'ember';
export default Ember.Controller.extend({
columns: function(){
var events = this.store.find('event');
var columns = [[],[],[]];
var count = 0;
events.forEach(function(item, index, enumerable){
columns[count].push(item);
count++;
if (count === 4){
count = 0;
}
});
columns = [{column: columns[0]}, {column: columns[1]}, {column: columns[2]}];
return columns;
}.property()
});
.
//app/templates/index.hbs
<div class="row">
{{#each 'columns'}}
<div class="col-lg-4">
{{#each 'column'}}
{{this}}
{{/each}}
</div>
{{/each}}
</div>
Upvotes: 1
Views: 387
Reputation: 47367
find
returns a promise, so you need to wait for it to resolve before you can use it. Additionally you should use pushObject
so that Ember is aware you've added a new item to the array.
export default Ember.Controller.extend({
columns:[[],[],[]],
setupColumns: function(){
var eventsPromise = this.store.find('event'),
columns = [[],[],[]],
count = 0,
self = this;
eventsPromise.then(function(events){
events.forEach(function(item, index, enumerable){
columns[count].pushObject(item);
count++;
if (count === 4){
count = 0;
}
});
self.set('columns', [{column: columns[0]}, {column: columns[1]}, {column: columns[2]}]);
});
}.on('init')
});
Honestly you should resolve the model before the controller (in the route), it would make this significantly easier.
Upvotes: 1