Ich habe den folgenden Code (unter Verwendung von Handlers, Arbeitscode von JSFiddle):

 {{#each this.cards}} 
 
 
 
{{title}}
 
 
 
 {{/jede}} 

{ "3columnLayout": false, "Karten": [ { "Titel": "Karte 1" }, { "Titel": "Karte 2" }, { "Titel": "Karte 3" } ] }

Im Grunde durchläuft es das Karten-Array und erstellt für jedes Element einen card-container Verwenden Sie dann Bootstrap, um jedem Div eine CSS-Klasse zuzuweisen, zum Beispiel col-md-6

• Mobil: Elemente werden in einer einzelnen Spalte angezeigt
• Tabletten: Elemente erscheinen in 2 Spalten
• Desktop: Elemente werden in 3 Spalten angezeigt

Das alles funktioniert wie erwartet und ergibt optisch die gewünschte Benutzeroberfläche (unabhängig von der Anzahl der Karten): Beispiel unten:

Wie im JSON gezeigt, benötige ich jedoch eine Eigenschaft außerhalb der einzelnen Kartenebene, um zu bestimmen, ob der Desktop von einem 4-Spalten-Layout zu einem 3-Spalten-Layout wechseln soll.

Ich wollte diese Eigenschaft nicht für jede Karte im Karten-Array wiederholen, also habe ich meinen Code wie in meinem Code-Snippet gezeigt neu organisiert (mithilfe von Handlers): https://jsfiddle.net/stcfa5wh/20/< ; /p>

Das bedeutet jetzt jedoch, dass, obwohl ich auf den Wert 3columnLayout zugreifen kann, der HTML-Code auf der Seite abgelegt wird und ich col nicht mehr verwenden kann So wie ich es mache. Vorher erledigt.

Zum Beispiel könnte ich auf einem Tablet jede image-card auf 50 % Breite einstellen, aber es ignoriert die Notwendigkeit von Zeilen.

Kann jemand eine Möglichkeit vorschlagen, die Struktur des HTML beizubehalten und gleichzeitig Attribute der obersten Ebene zu implementieren (z. B. 3columnLayout)?