Manipulieren des Ember-Modells in Komponente

Question

Um das Layout einer Seite zu steuern, versuche ich, ein Modell an eine Ember-Komponente zu übergeben und sie in Gruppen zu splitten. Ich kann nicht herausfinden, wie ohne content._data zugreifen und das Modell im Wesentlichen neu erstellen. Der grobe Code:

parentRoute.js

export default Ember.Route.extend({ 
    model() { 
    return this.store.findAll('item'); 
    } 
}); 

parentRoute.hbs

{{ wall model=model }} 

childComponent.js

export default Ember.Component.extend({ 
    groupedItems: Ember.computed(function() { 
     // convert model data into array of objects 
     let allItemss = this.get('model.content').map(function(obj){ 
      let mappedObj = obj._data; 
      mappedObj.id = obj.id; 
      return mappedObj; 
     }); 

     // group into arrays of up to 3 for layout 
     let groupedItems = []; 
     while(allItems.length){ 
      groupedItems.push(allItems.splice(0,3)); 
     } 

     return groupedItems; 
    }) 
}); 

childComponent.hbs

{{#each groupedItems as |items|}} 
     {{#each items as |item|}} 
     <div class="item-group-{{items.length}}"> 
      <h2 class="headliner"> 
       {{ item.id }} {{ item.name }} 
      </h2> 
     </div> 
     {{/each}} 
{{/each}} 

Gibt es einen besseren Weg, dies zu tun? Ich kann nicht .then() mit this.get('model') arbeiten, und die item selbst kann nicht gespleißt werden, da es ein Objekt, kein Array ist.

Answer 1

Sie sollten direkt auf das Modell zugreifen können, da der Modell-Hook das "findAll" vor dem Rendern der Seite auflösen wird. Auch Ihre berechnete Eigenschaft sollte sich auf das 'Modell' beziehen, andernfalls wird sie nicht neu berechnet, wenn sich das Modell ändert. Wie folgt aus:

groupedItems: Ember.computed('model', function() { 
    // convert model data into array of objects. 
    let allItems = this.get('model').map((item) => { 
     return item; 
    }); 
    let result = []; 
    while (allItems.length) { 
     result.push(allItems.splice(0, 3)); 
    } 
    return result; 
    }) 

Wie Sie sehen können, können Sie this.get('model') verwenden, die ich eigentlich ein ember Array-artiges Objekt Sie Array-Operationen auf tun können. Die einzige Sache ist, dass Sie Spleiß nicht darauf verwenden können, also müssen Sie es in ein reguläres Arrayformat umwandeln.

Oder Sie könnten glut „Scheibe“ Methode verwenden und tun dies

groupedItems: Ember.computed('model', function() { 
    let pos = 0; 
    let result = []; 
    while (pos < this.get('model.length')) { 
     result.push(this.get('model').slice(pos, pos + 3)); 
     pos += 3; 
    } 
    return result; 
    }) 

Answer 2

ich hinzugefügt haben ein glut-twiddle hier für manipultaing ember Modell in der Komponente und der Gruppe die Einzelteile durch Länge 3.

https://ember-twiddle.com/f425ce4b7aa48529b9d7e00878e5e4db?openFiles=routes.index.js%2Ctemplates.components.wall-page.hbs.

In der Komponente ist die berechnete ember-Eigenschaft wie folgt.

import Ember from 'ember'; 

export default Ember.Component.extend({ 

    groupedItems: function() { 
    let groupedItems = [] 
    , t = this 
    , length = this.get('alphaList.length') - 1 
    , lastVal = length/3; 

    let allItems = this.get('alphaList').map(function(obj, index){ 
     if (index !== 0 && index % 3 === 0) { 
      var otherArray = []; 
      for (var x = index-3; x<= index-1; x++) { 
      otherArray.push(t.get('alphaList')[x]); 
      } 
      groupedItems.push(otherArray); 
     } 
    }); 

    if (length > 0) { 
     var lastArray = []; 
     for (var x = 3 * parseInt(lastVal); x<= length; x++) { 
     lastArray.push(t.get('alphaList')[x]); 
     } 
     groupedItems.push(lastArray); 
    } 
    return groupedItems; 
    }.property('alphaList') 
});