CODEWITHSUNDEEP
javascriptember.jsember-data
MikeV
MikeV

Reputation: 657

emberjs split promise array

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

Answers (1)

Kingpin2k
Kingpin2k

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

Related Questions