Come eseguire iterazioni sulla matrice di oggetti in Handlebar?

Questa potrebbe sembrare una domanda sciocca, ma non riesco a trovare la risposta da nessuna parte.

Sto colpendo questo Web Api che restituisce una serie di oggetti in formato JSON:

matrice di oggetti

I documenti di Handlebars mostrano il seguente esempio:

    {{#each people}}
  • {{this}}
  • {{/each}}

nel contesto di:

     { people: [ "Yehuda Katz", "Alan Johnson", "Charles Jolley" ] } 

    Nel mio caso non ho un nome per l’array, è solo l’object radice della risposta. Ho provato a utilizzare {{#each}} senza fortuna.

    La prima volta che uso Manubri … cosa mi manca?

    AGGIORNARE

    Ecco un violino semplificato per mostrare quello che sto chiedendo: http://jsfiddle.net/KPCh4/2/

    Il manubrio richiede che la variabile di contesto sia un object e non un array?

    È ansible passare this a ciascun blocco. Vedi qui: http://jsfiddle.net/yR7TZ/1/

     {{#each this}} 
    {{/each}}

    Questo violino ha entrambi e tutti i poteri diretti. http://jsfiddle.net/streethawk707/a9ssja22/ .

    Di seguito sono riportati i due modi di iterare su array. Uno è con passaggio diretto di JSON e un altro sta nominando l’array JSON mentre passa al content holder.

    Eg1: l’esempio sottostante chiama direttamente la chiave json (dati) all’interno della variabile small_data.

    In html usa il seguente codice:

     

    Il sotto può essere inserito nell’intestazione o nel corpo di html:

      

    Quello sotto è su documento pronto:

     var small_source = $("#small-template").html(); var small_template = Handlebars.compile(small_source); 

    Il seguente è il json:

     var small_data = { data: [ {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "[email protected]" }, {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "[email protected]" } ] }; 

    Alla fine albind il json al detentore del contenuto:

     $("#small-content-placeholder").html(small_template(small_data)); 

    Eg2: Iterazione che usa ciascuno.

    Si consideri il seguente json.

     var big_data = [ { name: "users1", details: [ {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "[email protected]" }, {username: "allison1", firstName: "Allison", lastName: "House", email: "[email protected]" }, {username: "ryan1", firstName: "Ryan", lastName: "Carson", email: "[email protected]" } ] }, { name: "users2", details: [ {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "[email protected]" }, {username: "allison2", firstName: "Allison", lastName: "House", email: "[email protected]" }, {username: "ryan2", firstName: "Ryan", lastName: "Carson", email: "[email protected]" } ] } ]; 

    Passando il json al content holder basta nominarlo in questo modo:

     $("#big-content-placeholder").html(big_template({big_data:big_data})); 

    E il modello assomiglia a:

      

    Intendevo nel template() chiama ..

    Hai solo bisogno di passare i risultati come un object. Quindi, invece di chiamare

     var html = template(data); 

    fare

     var html = template({apidata: data}); 

    e usa {{#each apidata}} nel codice del tuo modello

    demo su http://jsfiddle.net/KPCh4/4/
    ( rimosso alcuni avanzi if codice si è schiantato )

    I manubri possono usare un array come contesto. Puoi usare come la radice dei dati. In questo modo puoi scorrere i dati dell’array con {{#each .}} .

     var data = [ { Category: "General", DocumentList: [ { DocumentName: "Document Name 1 - General", DocumentLocation: "Document Location 1 - General" }, { DocumentName: "Document Name 2 - General", DocumentLocation: "Document Location 2 - General" } ] }, { Category: "Unit Documents", DocumentList: [ { DocumentName: "Document Name 1 - Unit Documents", DocumentList: "Document Location 1 - Unit Documents" } ] }, { Category: "Minutes" } ]; $(function() { var source = $("#document-template").html(); var template = Handlebars.compile(source); var html = template(data); $('#DocumentResults').html(html); }); 
     .row { border: 1px solid red; } 
       
    pos

    Usando this e {{this}} . Vedi il codice sottostante in node.js:

     var Handlebars= require("handlebars"); var randomList= ["James Bond", "Dr. No", "Octopussy", "Goldeneye"]; var source= "
      {{#each this}}
    • {{this}}
    • {{/each}}
    "; var template= Handlebars.compile(source); console.log(template(randomList));

    Output del log della console:

     
    • James Bond
    • Dr. No
    • Octopussy
    • Goldeneye