jeudi 6 juillet 2017

EmberJS Model Iteration by Value

I am working on a restaurant's website as my first ember project and I am having a hard time trying to figure out how to handle the menu model.

currently the models/menu.js file reads like this:

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  description: DS.attr('string'),
  price: DS.attr('number'),
  soyFree: DS.attr('string'),
  glutenFree: DS.attr('string'),
  addOnName: DS.attr('string'),
  addOnPrice: DS.attr('number'),
  type: DS.attr('string'),
  isAppetizer: Ember.computed('type', function(){
    return this.get('type') == 'Appetizer';
  }),
  isBreakfast: Ember.computed('type', function(){
    return this.get('type') == 'Breakfast';
  })
});

My menu template file is:

<div class="col-md-8 col-md-offset-2 text-center">
  <h2>Menu</h2>
  <h2 class="text-center">Appetizers</h2>
  
    

      <p>
        <span><strong></strong> - <em></em> - </span>
        <button class="btn btn-danger" >Delete</button>
      </p>
    

  
  <h2 class="text-center">Breakfast</h2>
  
    

      <p>
        <span><strong></strong> - <em></em> - </span>
        <button class="btn btn-danger" >Delete</button>
      </p>
    

  
</div>


As you can see I am having to reiterate through all of the menu model entries for each section (Appetizers / Breakfast). Is there a way with ember that I can only iterate over the specific item type for each #each block. IE: Fill the appetizer section ?

route file is:

import Ember from 'ember';

export default Ember.Route.extend({
  model(){
    return this.store.findAll('menu');
  }
});




Aucun commentaire:

Enregistrer un commentaire