EmberJS 模型按值迭代

Question

作为我的第一个 ember 项目，我正在开发一家餐厅的网站，我很难弄清楚如何处理菜单模型。

目前 models/menu.js 文件如下所示：

从“ember-data”导入 DS；

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 访问开胃菜菜单。

模型（） { 返回 this.store.findAll('menu').then((result) => { 返回 { appetizerMenu: result.filterBy('isAppetizer', true), breakFastMenu: result.filterBy('isBreakfast', true), } }); }

2.你可以在控制器中拥有计算属性。

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.如果您想要更多像您建议的{{#each model.type == 'Appetizer'}} 那样的购物助手，那么您可能会对ember-composable-helpers 感兴趣