How can I decorate my models post load?

Question

I have a model Item where id, title is in a fixture, and other data comes from two REST calls to a third party.

App.Item = DS.Model.extend({
  title: DS.attr('string'),
  buying: DS.attr('number'),
  selling: DS.attr('number')
});

App.Item.FIXTURES = [
  {
    id: 1,
    title: 'Cake',
  },{
    id: 2,
    title: 'Shoes',
  },{
    id: 1,
    title: 'Awesome stuff',
  },
]

The third party gives me results like this:

{
  "result": [
    {
      "item": "Cake",
      "result": 220
    },
    {
      "item": "Shoes",
      "result": 90
    },
    {
      "item": "Awesome stuff",
      "result": 100
    }
  ]
}

Can I render out the view, and asynchronously render in the buy/sell prices as I receive them? The third party supply me with a list of numbers, so I would prefer not to create some form of handlebars templates or components, because on list views with a reasonable amount of items it would be an additional 10-20 API calls.

Kingpin2k Kingpin2k · Accepted Answer · 2013-12-24T18:11:39

You most definitely can. There are no technical barriers. Here is just one way it could be done.

  model: function() {
    var promise = this.get('store').find('item'),
        pricePromise = Ember.$.getJSON('/someapi');

    promise.then(function(items){
      pricePromise.then(function(json){
        //some black magic
        var hash = {};

        json.result.forEach(function(price){
          hash[price.item] = price;
        });
        console.log(hash);
        items.forEach(function(item){
          var price = hash[item.get('title')];
          if(price){
            item.set('selling', price.result);
          }
        });

      });
    });
    return promise;
  }

http://emberjs.jsbin.com/OxIDiVU/86/edit

How can I decorate my models post load?

1 Answers