Ember: Ember Data results into components

Question

On my route im requesting via ember-data some records. Lets say the model-type is 'item'.

model: function(){
    return this.get('store').find('item');
}

now ive got a component named 'my-foo' which should use the records to do something with the data. Therefore Im calling the component like that:

{{my-foo myItems=model}}

in my routes template. In the components js part, Im trying to get the myItems-field and iterate over them.

this.get('myItems').forEach(...);

Unfortunalety its not clear for me if the model i want to overgive to the component is an collection from records or just a single record (since on some routes the model is the result of store.find('item') on other store.find('item', 23424).

How can I check what kind of data arrives in the component.

(Also Im wondering what kind of object is it since im using ember-data. Is it a DS.recordarray or a promise or something else at this time?)

Answer 1

I can see two solutions to the problem:

1. Making component aware of the form that model receives
2. Checking and/or adjusting data type in component (in my opinion better default scenario)

As for making component aware - you could go with 2 approaches. Either differentiate in a way how your component take arguments, so there could be:

• {{my-foo myItems=model}} - when you expect to receive multiple items
• {{my-foo item=model}} - when you expect to receive single one

And then work accordingly further on, or - the second approach - is to actually split component (while extracting shared part to a different structure) so you would have my-foo for single items and my-foo-array for multiple.

Advantage of this approach is that you don't deal with what-if-multiple logic, that might grow to something unmanagable later on, yet usage of it is dependant on project requirements.

As for checking and/or adjusting - you already have data in, so could make assumption that your data is dirty and sanitize it using computed property. Below example, where single item is wrapped into an array.

export default Ember.Component.extend({
  sanitizedItems: Ember.computed('items', function() {
    var items = this.get('items');
    if(!Array.isArray(items)) {
      return [items];
    } else {
      return items;
    }
  })
});

Since you're using Ember.Data, depending on your setup, you might get a promise instead of object/array. In this case, you might want to resolve promise using this.get('items').then(function(items) { ... }) before doing sanitization, yet the idea behind is exactly the same.

You can check full example: Gist, Twiddle