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