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