Ember Anzeigedaten im Tabellenformat

Question

Ich habe verschiedene Kaffeegetränke aus einem Kaffeeladen. Es gibt verschiedene Getränke (Mocha, Drip, CustomDrink1 usw.), die unterschiedliche Größen haben. Ich muss einen Tisch machen, der diese Getränke mit dem Getränk auf der y-Achse und der Größe als x-Achse anzeigt.

So zum Beispiel habe ich Mocha 12oz, 16oz, 20oz; Tropfen 12oz, 16oz, 20oz; Mein kundenspezifisches Getränk 12oz, 16oz, 20oz.

Dieses Projekt wird mit 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'), 
}); 

Meine allgemeinen Idee ist es, die Daten in der Strecke zu bekommen und dann Schleife durch sie irgendwie in der Vorlage. Die wichtigen Attribute für das Problem sind type und size, weil ich mit einem Getränk Typ (Mokka) und dann alle Größen (12 Unzen, 16 Unzen, 20 Unzen)

// 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, 
    }); 
    } 
} 

In der Vorlage ich auf Probleme stoßen eine Reihe müssen Dispaly weil ich nicht herausfinden kann, wie man diese Daten nach Getränkeart aufteilt.

Ich habe auf diesem seit Monaten, ab und zu fest (seit Ember 1.13 war spätestens). Bevor ich durch die Aufteilung der Getränke in verschiedene Scope-Variablen kam, bevor es zur Vorlage kam. Es war ein hacky Workaround, und funktioniert nicht mehr, weil Benutzer nun benutzerdefinierte Getränke hinzufügen können, so dass ich die Getränkearten nicht mehr fest codieren kann.

Ich könnte das völlig falsch gehen, irgendwelche Vorschläge willkommen.

Answer 1

Ich würde empfehlen, eine berechnete Eigenschaft zu haben, die die Daten so berechnet, dass Sie sie in Ihrer Vorlage verwenden können.

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

Dann können Sie eine Schleife durch sie mit

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