jeudi 10 mars 2016

Ember. Using array of Objects from Component in template

I'm very new with Ember, and I have an app that takes 2 kind of objects( item, and feature). An item has many features, and a feature has many items.

I have a component (item-component) with one method that it's supposed to take all the features from an item, take all the ones that have the value 'brand', include them in a new array and make them unique.

That new array is the one that I want to use in a template, but I can't get it to work.

I have also created "testArray" to try it, but I can't even make it to work with a test array.

/model/item.js

import DS from 'ember-data';

export default DS.Model.extend({
  imageUrl: DS.attr('string'),
  name: DS.attr('string'),
  features: DS.hasMany('feature', { async: true })
});

/model/feature.js

import DS from 'ember-data';

 export default DS.Model.extend({
   name: DS.attr('string'),
   value: DS.attr('string'),
   items: DS.hasMany('item', { async: true }),

   IsCompany: function() {
     return this.get('name') ==='company';
   }.property('name','company')

 });

components/item-component.js

  import Ember from 'ember';

  const ItemComponent = Ember.Component.extend({

  uniqueCompanies: function() {
   var features = this.get('features');
   var uniqueObjects = [];

   let companies = features.map((feature)=>{
     if (feature.IsCompany){
       return feature;
     }
  });

  return companies.filter(function(item){
    if(!uniqueObjects.isAny('name', item.name)){
       uniqueObjects.push(item);
       return true;
     }
    return false;
    });
   }.property('name'),

   testArray: [{property:'b'}, {property:'c'}]
 });

templates/components/product/item-component.hbs {{yield}}

{{ company }}
{{testArray}}

templates/item.hbs for the app

       <select>
      <option value="Select Brand" >Select Brand</option>
      {{#each model as |item|}}
        {{#each item.features as |feature|}}
          {{#if feature.IsCompany}}

            <option value="#">  {{item-component company=feature.value}}</option>

            {{/if}}
        {{/each}}
      {{/each}}
    </select>

templates/item.hbs for the testArray

    <ul>
      {{#each testArray as |company|}}
        <li>{{ item-component company.property }}</li>
      {{/each}}
    </ul>

Aucun commentaire:

Enregistrer un commentaire