Данные для отображения в табличном формате

Question

У меня есть различные напитки из кофе. Существуют различные напитки (Mocha, Drip, 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, потому что мне нужно Dispaly строку с типом напитка (мокко), а затем все размеры (12oz, 16oz, 20oz)

// 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 был последним). До того, как я добрался, разбив напитки на разные переменные сферы, прежде чем попасть в шаблон. Это был хакерский обходной путь, и он больше не работает, потому что теперь пользователи могут добавлять пользовательские напитки, чтобы я больше не мог жестко печатать типы напитков.

Возможно, я ошибаюсь, все предложения приветствуются.

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