EmberJS Modell Iteration von Wert

Question

Ich arbeite an einem Website Restaurant als mein erstes ember Projekt und ich bin eine harte Zeit versucht, herauszufinden, wie das Menü Modell zu handhaben.

derzeit die Modelle/menu.js Datei liest sich wie folgt:

Import DS von 'glut-Daten';

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

Meine Menüvorlagendatei ist:

<div class="col-md-8 col-md-offset-2 text-center"> 
    <h2>Menu</h2> 
    <h2 class="text-center">Appetizers</h2> 
    {{#each model as |menu|}} 
    {{#if menu.isAppetizer}} 

     <p> 
     <span><strong>{{menu.name}}</strong> - <em>{{menu.description}}</em> - {{menu.price}}</span> 
     {{#if session.isAuthenticated}}<button class="btn btn-danger" {{action "deleteMenuItem" menu}}>Delete</button>{{/if}} 
     </p> 
    {{/if}} 

    {{/each}} 
    <h2 class="text-center">Breakfast</h2> 
    {{#each model as |menu|}} 
    {{#if menu.isBreakfast}} 

     <p> 
     <span><strong>{{menu.name}}</strong> - <em>{{menu.description}}</em> - {{menu.price}}</span> 
     {{#if session.isAuthenticated}}<button class="btn btn-danger" {{action "deleteMenuItem" menu}}>Delete</button>{{/if}} 
     </p> 
    {{/if}} 

    {{/each}} 
</div> 
{{outlet}} 

Wie man sehen kann ich durch alle Menüeinträge Modell für jeden Abschnitt (Vorspeisen/Frühstück) zu wiederholen, habe. Gibt es eine Möglichkeit mit Ember, dass ich nur über den spezifischen Item-Typ für jeden einzelnen Block iterieren kann. . dh

{{#each model.type == 'Appetizer'}} 
    Fill the appetizer section 
{{/each}} 

Hier ist meine Route-Datei ist:

import Ember from 'ember'; 

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

Answer 1

1. Sie können den gewünschten Wert aus dem Modell Haken zurückzukehren und greifen Sie model.appetizerMenu für Appetizer Menü.

 
    model() { 
     return this.store.findAll('menu').then((result) => { 
      return { 
       appetizerMenu: result.filterBy('isAppetizer', true), 
       breakFastMenu: result.filterBy('isBreakfast', true), 
      } 
     }); 
    } 

2.you kann Eigenschaft in der Steuerung berechnet haben.

appetizerMenu: Ember.computed.filterBy('model','isAppetizer',true), 
breakFastMenu: Ember.computed.filterBy('model','isBreakfast',true), 

3.Further Sie vereinfachen können, dass Sie berechnete Eigenschaft im Modell nicht brauchen zur Zeit für jede Art wie Sie haben. Sie type Attribut allein zum Filtern verwenden können, wann immer erforderlich.

 
    appetizerMenu: Ember.computed.filterBy('model','type','Appetizer'), 
    breakFastMenu: Ember.computed.filterBy('model','type','Breakfast'), 

4.Wenn Sie mehr shopisticated Helfer wollen wie Sie vorgeschlagen {{#each model.type == 'Appetizer'}} dann könnten Sie in ember-composable-helpers