Loops im Lenker

Question

Ich habe ein Array von Tracks aus einer Datenbank, die ich in einem div anzeigen möchte. Genauer gesagt muss ich alle zwei von ihnen in eine Bootstrap-Zeile setzen. Ich kann es leicht in der Controller-JS-Datei tun, indem ich zuerst alle in einem Fragmentelement sammle und dann eine Schleife benutze, um sie in die Zeilen und dann in das Zieldiv zu bringen, aber ich frage mich, ob es direkt während der Produktion möglich wäre sie im Lenker? Hier ist die Vorlage Lenker:

{{#if result}} 
{{#each result}} 
<div class="playlist-item col-xs-4"> 
    <a href="#/user/{{username}}/playlist/{{id}}" class="no-style"> 
     <h3 class="result-title">{{title}}</h3> 
     <p class="result-description">{{description}}</p> 
     <img class="result-image img-circle" src="{{img}}"> 
    </a> 
    <br> 
<a type="button" id="{{id.videoId}}" class="btn btn-default btn-remove" 
href="#/user/{{username}}/playlist/{{id}}/remove-from-playlist">Remove from 
playlist</a> 
</div> 
{{/each}} 
{{else}} 
<h4>You currently have no tracks in your playlist</h4> 
{{/if}} 

Hier ist die JS:

showPlaylist() { 
    return Promise.all([ 
     userController.loadPlaylist(), 
     templates.loadTemplate('playlist'), 
    ]) 
    .then(([tracks, template]) => { 
     let fragment = document.createDocumentFragment() 
     let div = document.createElement('DIV'); 
     div.innerHTML = template(tracks); 
     div = [...div.children]; 
     let len = div.length 
     while(div.length > 0) { 
      let row = document.createElement('div') 
      row.className = 'row' 
      let col = div.splice(0,2) 
      row.append(col[0]) 
      if(col[1]) { 
       row.append(col[1]) 
      } 
      len -= 2; 
      fragment.append(row) 
     } 
     $('#container').html(fragment) 
    }) 
} 

Answer 1

Es ist möglich, Ihre Elemente in Zeilen zu gruppieren, aber Sie würden eine eigene Hilfsfunktion zu tun, es verwenden müssen.

Wir müssen eine block helper erstellen, die ein Array von Elementen übernimmt, das Array in Zeilen mit der angegebenen Anzahl von Spalten aufteilt und dann die Block- "Zeilen" -Maske auf jede Zeile anwendet. Wenn wir unser Block Helfer „eachRow“ nennen, könnte die resultierende Vorlage wie folgt aussehen:

{{#eachRow result 2}} 
    <div class="row"> 
     {{#each columns}} 
      <div class="playlist-item col-xs-4"> 
       {{!-- TODO: Rest of item template goes here. --}} 
      </div> 
     {{/each}} 
    </div> 
{{/eachRow}} 

Beachten Sie, dass wir immer noch die Elementvorlage in einem regelmäßigen Lenker #each Block verwenden. Außer jetzt ist die #each innerhalb eines "Reihe" Schablonenblocks eingewickelt. Die 2 ist ein Parameter, der an unseren Helfer übergeben wird, der die Anzahl der Spalten in jeder Zeile sein soll.

Als nächstes werden wir unsere Helfer schreiben:

Handlebars.registerHelper('eachRow', function (items, numColumns, options) { 
    var result = ''; 

    for (var i = 0; i < items.length; i += numColumns) { 
     result += options.fn({ 
      columns: items.slice(i, i + numColumns) 
     }); 
    } 

    return result; 
}); 

Dieser Helfer einfach iteriert über unsere Quelle Array in Schritten von numColumns und für jede Iteration unsere „Zeile“ Blockvorlage gilt, die Anordnung von Elementen vorbei (columns) die in dieser Zeile gerendert werden sollen. Der Helfer verkettet die Zeilen und gibt das Ergebnis zurück.

Ich habe eine fiddle als Referenz erstellt.