I'm trying to split products into two categories, snack and share, but my computed.equal isn't working. I don't have a database connected at the moment, so I'm using ember-mirage to fake the data. The products show on the page if I remove the if statement, but for some reason don't when I add the if statement. Thanks in advance.
products.hbs
<div class='container'>
{{#each model as |product|}}
{{#if product.isSnack}}
<div class='col-md-4'>
<img src="{{product.image}}">
<h3>{{product.name}}</h3>
<p>{{product.description}}</p>
<h4>£{{product.price}}</h4>
<button type='button' class='btn btn-xs'>ADD TO BASKET</button>
</div>
{{/if}}
{{/each}}
</div>
model/product.js
export default Model.extend({
name: attr('string'),
description: attr('string'),
typeOf: attr('string'),
price: attr('number'),
image: attr('string'),
isSnack: Ember.computed.equal('typeOf', 'snack'),
isShare: Ember.computed.equal('typeOf', 'share')
});
mirage/config.js
this.get('/products', function() {
return {
data: [{
type: 'products',
id:1,
attributes: {
name: "Mediterranean Snack Pop's",
typeOf: 'snack',
description: '',
price: 0.80,
image: ''
}
}, {
type: 'products',
id:2,
attributes: {
name: "Spicy Snack Pop's",
typeOf: 'share',
description: '',
price: 0.80,
image: ''
}
}
}]
};
});
In your mirage response, you should use dasherized values, so i.e
{
type: 'products',
id:2,
attributes: {
name: "Spicy Snack Pop's",
'type-of': 'share',
description: '',
price: 0.80,
image: ''
}