Question

我正在一家餐馆的网站上作为我的第一个余烬项目，我很难弄清楚如何处理菜单模型。

目前models / menu.js文件的内容如下：

从＆＃39; ember-data＆＃39;;

导入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

您可以从模型钩子返回所需的值，并使用appetizerMenu: Ember.computed.filterBy('model','isAppetizer',true), breakFastMenu: Ember.computed.filterBy('model','isBreakfast',true),为Appetizer菜单访问它。

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

2.您可以在控制器中计算属性。

type

3.此外，您可以简化您在模型中不需要像目前所拥有的每种类型的计算属性。您可以随时使用{{#each model.type == 'Appetizer'}}属性进行过滤。

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

4.如果您想要更多购物帮助，就像您建议#zz15_RootAspMenu li:nth-child(2) a { color : blue; font-weight : bold; }那样您可能对ember-composable-helpers感兴趣

EmberJS按值计算模型迭代

1 个答案: