Lenker zum Hinzufügen von Elementen zur Tabellenvorlage

Question

Ich möchte Elemente aus einer Datenbank in eine lenker.js-Vorlage einfügen.

Meine Vorlage sieht wie folgt aus:

<script id="some-template" type="text/x-handlebars-template"> 
    <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp"> 
    <thead> 
     <th>Categories</th> 
    </thead> 
    <tbody> 
     {{#categories}} 
     <tr> 
      <td>{{categoryName}}</td> 
     </tr> 
     {{/categories}} 
    </tbody> 
    </table> 
</script> 

Mein JS sieht wie folgt aus:.

$(document).ready(function() { 

    $.getJSON("categories.php", function(data) { 

    let source = $("#some-template").html(); 
    let template = Handlebars.compile(source); 

    for (let i = 0; i < data.length; i++) { 
     var output = { 
     categories: [{ 
      categoryName: data[i].name 
     }] 
     }; 

     console.log(output.categories) 
     $("#sampleArea").html(template(output)); 
    } 
    }); 
}); 

Wenn ich $ ("# sampleArea") verwenden html (Vorlage (Ausgabe)); Es fügt nur das letzte Element in meiner Datenbank hinzu. Wenn ich $ ("# sampleArea") verwende, append (template (output)); es macht jedoch zwei Tabellen; eins für jeden Artikel in meiner Datenbank.

ich auch versucht:

{{#each categories}} 
    <tr> 
     <td>{{categoryName}}</td> 
    </tr> 
{{/each}} 

aber das hat nicht funktioniert entweder.

Answer 1

Sie überschreiben die Ausgabevariable jedes Mal, wenn Sie ein Element durchlaufen. Versuchen Sie, die Ausgabevariable außerhalb der for-Schleife zu definieren und innerhalb der Schleife darauf zu drücken.

$(document).ready(function() { 

    $.getJSON("categories.php", function(data) { 

    let source = $("#some-template").html(); 
    let template = Handlebars.compile(source); 
    var output = { 
     categories: [] 
    }; 

    for (let i = 0; i < data.length; i++) { 
     output.categories.push({ 
     categoryName: data[i].name 
     }); 
    } 

    console.log(output.categories) 
    $("#sampleArea").html(template(output)); 
    }); 
});