Question

我从咖啡店买了各种咖啡饮料。有各种不同大小的饮料（摩卡，滴水，CustomDrink1等）。我需要制作一张桌子，用y轴显示饮料，尺寸为x轴。

所以例如我有Mocha 12oz，16oz，20oz;滴水12盎司，16盎司，20盎司;我的定制饮料12盎司，16盎司，20盎司。

此项目正在使用Ember 1.13

// models/store-drink.js
export default DS.Model.extend({
    _store: DS.belongsTo('store', {async: true}),
    type: DS.attr('string'),
    size: DS.attr('number'),
    price: DS.attr('number'),
    active: DS.attr('boolean'),
    custom: DS.attr('boolean'),
});

我的一般想法是获取路径中的数据，然后在模板中以某种方式循环它。问题的重要属性是type和size，因为我需要显示饮料类型（Mocha）的行，然后是所有尺寸（12盎司，16盎司，20盎司）

// routes/menu.js
export default Ember.Route.extend({
  model: function() {
    let myStoreId = this.controllerFor('application').get('myStore.id');

    return Ember.RSVP.hash({
      myStore: this.store.find('store', myStoreId),
      storeMilk: this.store.find('storeMilk', {'store':myStoreId}),
      milk: this.store.find('milk', {'store':myStoreId}),
      storeDrinks: this.store.find('store-drink', {'store':myStoreId})
    });
  },
  setupController: function(controller, model) {
    controller.setProperties({
      'storeMilk': model.storeMilk,
      'storeDrinks': model.storeDrinks,
      'milk': model.milk,
      'myStore': model.myStore,
    });
  }
}

在模板中我遇到了问题，因为我无法弄清楚如何按饮品类型拆分这些数据。

<table class="table table-striped">
      <thead>
        <tr>
          <th>Drink</th>
          <th>12oz</th>
          <th>16oz</th>
          <th>20oz</th>
          <th>24oz</th>
          <th>32oz</th>
        </tr>
      </thead>
      <tbody>
        /* all of this is here is wrong. I believe I would need to do 2
           loops. the first one would be to create rows that represent drink
           types, and then the second loop would loop through the drink type
           and display the sizes in the columns.
        */
        {{#each storeDrink in storeDrinks}}
        <tr>
          <td>{{storeDrink.type}}</td>
          {{#each drink in storeDrinks}}
            <td class="{{unless drink.active 'disabled'}}" {{action 'setDetailDrink' drink}} id="drink-{{drink.id}}">
              {{#if drink.active}}
                {{decimal drink.price}}
              {{else}}
                <span class="fa fa-close"></span>
              {{/if}}
            </td>
          {{/each}}
        </tr>
        {{/each}}
      </tbody>
    </table>

我已经坚持了好几个月，一直关闭（因为Ember 1.13是最新的）。在我到达模板之前将饮料分成不同的范围变量之前。这是一个hacky解决方法，并且不再起作用，因为现在用户可以添加自定义饮料，因此我不能再对饮料类型进行硬编码。

我可能会对此完全错误，欢迎任何建议。

Answer 1

我建议使用一个计算属性，以便在模板中使用它来计算数据。

types: Ember.computed('drinks', {
    get() {
        return get(this, 'drinks').reduce((total, curr) => {
            if(!total.findBy('type', get(curr, 'type'))) {
                total.push(get(curr, 'type'));
            }
            return total;
        }, []).map(type => ({
            type,
            sizes: get(this, 'drinks').filterBy('type', type)
        }));
    }
})

然后你可以用

循环它

{{#each types as |type|}}
    type {{type}} has following sizes:
    {{#each type.sizes as |size|}}
        {{size.size}}
    {{/each}}
{{/each}}

Ember以表格格式显示数据

1 个答案: