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

如您所见，我必须重复每个部分（开胃菜/早餐）的所有菜单模型条目。 ember 有没有办法让我只能迭代每个 #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

您可以 return 模型挂钩中的所需值，并使用 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.Further 你可以简化你不需要在模型中为每种类型计算属性就像你现在拥有的那样。您可以在需要时单独使用 type 属性进行过滤。

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

4.If 你想要更多像你建议的购物助手 {{#each model.type == 'Appetizer'}} 那么你可能会对 ember-composable-helpers

感兴趣

EmberJS 模型迭代值

EmberJS Model Iteration by Value

javascript

model-view-controller

ember.js