Come ottenere un valore di matrice all'indice utilizzando Handlebars.js?

Question

Dire che ho JSON:

{ 
userinput: [ 
    {name: "brian", "value": "i like pies"}, 
    {name: "susan", "value": "memes are stupid"} 
], 
feedback: [ 
    {value: "i also like pies"}, 
    {value: "null"} 
] 
} 

E sto cercando di disegnare una tabella come questa:

name ..... | input ...... | feedback 
-----------|----------------|----------------- 
brian  | I like pies | I also like pies 
susan  | mems are stupid| null 

E mentre mi rendo conto che sarebbe stato meglio avere un feedback come un valore " userinput ", quello che ho non è fatto in questo modo ...

Sto cercando di ottenere l'indice del feedback all'interno di {{#each userinput}}`, ad es.

{{#each userinput}} 
<td>{{name}}</td><td>{{value}}</td><td>{{../feedback[@index].value}}</td> 
{{/each}} 

Ma ovviamente {{../feedback[@index].value}} non funziona.

Qual è il modo migliore (senza modificare la struttura del json) per acquisire il valore dell'indice di corrispondenza all'interno dell'array di feedback?

Answer 1

Immagino che dovrai scrivere un block helper per questo, poiché sembra che @index possa essere utilizzato solo come stand-alone.

Ho modificato il "list" example, per consentire un modello come questo: "{{#list userinput feedback}}<td>{{name}}</td><td>{{value}}</td><td>{{@feedback.value}}</td>{{/list}}". L'implementazione è così, accettando due parametri "input" e "feedback" (più le "opzioni" standard).

Handlebars.registerHelper('list', function(input, feedback, options) { 
    var out = "", data; 

    // iterate over the input 
    for (var i=0; i<input.length; i++) { 
    if (options.data) { 
     data = Handlebars.createFrame(options.data || {}); 

     // add "feedback" item to the current frame's data 
     data.feedback = feedback[i]; 
    } 

    out += "<tr>" + options.fn(input[i], { data: data }) + "</tr>"; 
    } 

    return out; 
}); 

Here's the Fiddle.

Answer 2

Ciò può essere realizzato utilizzando the lookup helper:

Il lookup aiutante consente per la risoluzione parametro dinamico utilizzando le variabili manubrio. Questo è utile per risolvere i valori per gli indici di array.

Così il modello per il tuo esempio sarebbe simile a questa:

{{#each userinput}} 
    <td>{{name}}</td> 
    <td>{{value}}</td> 
    <td> 
     {{#with (lookup ../feedback @index)}} 
      {{value}} 
     {{/with}} 
    </td> 
{{/each}}