Lenker Helfer jedes X Anzahl der Elemente

Question

Ich iterieren eine Liste der Elemente iterieren. Etwas wie dieses:

{{#each myList as |item1 item2 item3 item4|}} 
    ...do stuff... 
{{/each}} 

Ich versuchte dieses, und es funktioniert nicht. Gibt es eine Möglichkeit, alle X Gegenstände zu greifen? Wenn ja, ist die Lösung skalierbar?

Answer 1

Lenker unterstützt dies nicht direkt. Ich würde empfehlen, eine berechnete Eigenschaft für irgendein Objekt zu verwenden. Hier beziehe ich mich auf model als die Anordnung, aber es könnte alles sein:

setSize: 4, 
modelSet: Ember.computed("model",() => { 
    let model= this.get('model'); 
    let setSize= this.get('setSize'); 
    let offset= 0; 
    let result= []; 

    while (offset < model.length) { 
    result.push(model.slice(offset, offset+setSize)); 
    offset+= setSize; 
    } 
    return result; 
} 

Nun, wenn in der Vorlage Iterieren:

{{#each modelSet as |items|}} 
    {{item.0}} {{item.1}} ...etc... 
{{/each}} 

Answer 2

Wenn feste Größe von 4 für das Aufspalten gut für Mit einer tagless-Komponente ist es einfach, das zu erreichen, was Sie wollen. Bitte überprüfen Sie die following twiddle. each-by-4 Komponente, die each-helper intern verwendet tut genau das, was Sie wollen, und daher ist es eine Komponente, die Sie einfach in Ihrer Anwendung einfach wiederverwenden können.

Jedoch; Wenn die feste Länge 4 nicht gut genug ist und Sie dynamische Aufspaltungslänge benötigen (ich meine manchmal 3, andere Male 5 usw.), ist es wirklich schwer zu erreichen, was Sie wollen, wenn nicht unmöglich. Ich meine:

{{#each myList as |item1 item2 item3 item4|}} 
    ...do stuff... 
{{/each}} 

Wenn das Folgende ist gut genug für Sie in Bezug auf dynamische Splitting-Größe;

{{#each-n list 4 as |subList|}} 
    {{subList.item1}} {{subList.item2}} {{subList.item3}} {{subList.item4}} 
{{/each-n}} 

Bitte beachten Sie auch die each-n Komponente innerhalb des gleichen twiddle I zur Verfügung gestellt haben. Dieser Ansatz scheint mehr wiederverwendbar zu sein; da es jede Größenaufteilung erlaubt. Ich hoffe das hilft dir.

Answer 3

ich hier meine Antwort hinzufügen wird, verwenden ember-loadash addon, zu installieren, um die unter Befehl ausführen,

ember install ember-lodash

Um allein erforderlich Array-Funktionen zu umfassen, können Sie es importieren wie import _array from 'lodash/array';

können Sie entweder Definieren Sie junkedList berechnete Eigenschaft, die von myList abhängt. oder Sie können es direkt als junkedList mit _array.chunk Methode erstellen.

import Ember from 'ember'; 
import _array from 'lodash/array'; 
export default Ember.Controller.extend({ 
    chunkSpan: 4, 
    junkedList: Ember.computed('myList', function() { 
     return _array.chunk(this.get('myList').toArray(), this.get('chunkSpan')); 
    }), 
}); 

iterieren,

{{#each junkedList as |groupedItems|}} 
    {{#each groupedItems as |item|}} 
    //design using item 
    {{/each}} 
{{/each}} 

Eine weitere Option, ember-composable-helper addonember install ember-composable-helper Addon installieren und chunk Helfer,

verwenden verweisen: https://github.com/DockYard/ember-composable-helpers#chunk

{{#each (chunk 4 junkedList) as |groupedItems|}} 
     {{#each groupedItems as |item|}} 
     //design using item 
     {{/each}} 
{{/each}} 

immer es mehrere Möglichkeiten gibt, aber die Wahl Es gehört dir.