EmberJS模型迭代法的價值

Question

我工作的一個餐廳的網站，我的第一個項目的餘燼和我有一個困難時期試圖找出如何處理菜單模式。從 '燼數據'

進口DS;：

目前該機型/ menu.js文件讀取這樣的

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

我的菜單模板文件是：

<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}} 

正如你看到的，我不必通過各種每個部分（開胃菜/早餐）菜單模式條目的重申。有沒有一種方法，我只能迭代每個#each塊的特定項目類型。 。 即

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

這裏是我的路線文件是：

import Ember from 'ember'; 

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

Answer 1

1. 您可以返回從模型鉤和訪問它使用model.appetizerMenu開胃菜單中選擇所需的值。

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

2.you可以在控制器已經計算屬性。

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

3.此外，你可以簡化，你不需要像目前你所擁有的每種類型的模型中的計算屬性。 您可以單獨使用type屬性過濾每當需要。

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

4.如果您想了解更多shopisticated幫助像你這樣的建議{{#each model.type == 'Appetizer'}}，那麼你可能會感興趣的ember-composable-helpers