Search code examples
javascriptember.jsember-cli-mirage

Ember computed equal not working with ember-mirage


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: ''
      }
    }
  }]
 };
});

Solution

  • 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: '' }