EmberJS 中的表格结构化数据

Question

我正在构建一个用于订购咖啡的应用程序。在其中一条路线上，我有商店菜单，其中包含一系列具有类型、大小和价格属性的饮料。因此，例如 12 盎司摩卡咖啡可能需要 5.00 美元。

我在构建这些数据并以我的想法显示它时遇到了麻烦，也许我没有以“ember 方式”思考，因为我是 ember 和前端开发的新手。

在我的路线中，我尝试了几种不同的方法。我有一个'store-drink'模型，它返回商店的所有饮料。我已经尝试使用它作为我的模型，并且能够返回我模型中的所有商店饮料，但是很难以类似表格的格式显示所有饮料，因为没有像 {{if drink.type == 'Mocha'}} 这样的内置帮助器。

我尝试的另一件事是使用 Ember.RSVP.hash 来分离路线中的饮料，然后在我的模板中安装 Ember Truth Helpers 以确定每种饮料的大小。

// routes/menu.js
model: function() {
  // get the drinks for the current store, for now hardcode
  const storeId = 4;

  return Ember.RSVP.hash({
    mochas: this.store.find(
      'store-drink', {'store':storeId, 'type':'Mocha'}),
    espressos: this.store.find(
      'store-drink', {'store':storeId, 'type':'Espesso'}),
  })
},
setupController: function(controller, model) {
  controller.set('mochas', model.mochas);
  controller.set('espressos', model.espressos);
}

//menu.hbs
{{#each drink in mochas}}
  {{if (eq drink.type 'Mocha')}}
    <h2>mochas</h2>
    {{drink.type}}
  {{/if}}
{{/each}}

我不仅在控制器的“mochas”对象中返回了所有饮料，而且我似乎也无法让安装的 if helper 工作。

有什么建议吗？也许我应该有一个完全不同的方法，或者我只是错过了一些东西。

我在 ember 1.13

Answer 1

我没有使用过 ember-truth-helper，但是看文档不应该是这样：

{{#each drink in mochas}}
  {{#if (eq drink.type 'Mocha'}}}
    <h2>mochas</h2>
    {{drink.type}}
  {{/if}}
{{/each}}

你也写了{{item.type}}而不是{{drink.type}}。尽管现在您已经对摩卡饮料进行了子查询，但您应该可以摆脱if。离开：

{{#each drink in mochas}}
  <h2>mochas</h2>
  {{drink.type}}
{{/each}}

对于find，它只是向后端发送一个GET，后端负责返回什么。如果您想就地过滤，请执行以下操作：

this.store.find('store-drink', {'store':storeId}, function(drink) {
  return drink.type === 'Mocha';
});