Emberはテーブル形式でデータを表示します

Question

私はコーヒーショップから様々なコーヒードリンクを持っています。さまざまなサイズのドリンク（モカ、ドリップ、カスタムドリンク1など）があります。私は飲み物をy軸に、サイズをx軸に表示するテーブルを作る必要があります。

たとえば、私はモカ12oz、16oz、20ozを持っています。ドリップ12oz、16oz、20oz;私のカスタムドリンク12oz、16oz、20oz。

このプロジェクトは、エンバー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'), 
}); 

を使用している私の一般的な考え方は、テンプレートで何とかそれを介した経路でデータを取得し、ループすることです。私は私が問題に実行テンプレートでは、その後すべてのサイズ（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, 
    }); 
    } 
} 

をドリンクタイプ（モカ）で行をdispalyとする必要があるため、問題のための重要な属性はtypeとsizeですこのデータを飲み物の種類別にどのように分割するのか分かりません。

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