arrays - multidimensional - array_search

¿Cómo iterar sobre la matriz de objetos en el manillar? (5)

Este violín tiene tanto each como json directo. http://jsfiddle.net/streethawk707/a9ssja22/ .

A continuación se muestran las dos formas de iterar sobre el conjunto. Una es con aprobación json directa y otra es nombrar la matriz json mientras pasa al titular del contenido.

Eg1: El ejemplo siguiente está llamando directamente a la clave json (datos) dentro de la variable small_data.

En html usa el siguiente código:

<div id="small-content-placeholder"></div>

El siguiente puede ser colocado en el encabezado o cuerpo de html:

<script id="small-template" type="text/x-handlebars-template"> <table> <thead> <th>Username</th> <th>email</th> </thead> <tbody> {{#data}} <tr> <td>{{username}} </td> <td>{{email}}</td> </tr> {{/data}} </tbody> </table> </script>

El siguiente está en documento listo:

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

El siguiente es el json:

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

Finalmente, adjunte el json al titular del contenido:

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

Eg2: iteración usando cada uno.

Considera el siguiente 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]" } ] } ];

Mientras pasa el json al titular del contenido, asígnele un nombre de esta manera:

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

Y la plantilla se ve así:

<script id="big-template" type="text/x-handlebars-template"> <table> <thead> <th>Username</th> <th>email</th> </thead> <tbody> {{#each big_data}} <tr> <td>{{name}} <ul> {{#details}} <li>{{username}}</li> <li>{{email}}</li> {{/details}} </ul> </td> <td>{{email}}</td> </tr> {{/each}} </tbody> </table> </script>

Esto puede parecer una pregunta tonta, pero parece que no puedo encontrar la respuesta en ningún lado.

Estoy accediendo a esta API web que devuelve una matriz de objetos en formato JSON:

Handlebars docs muestra el siguiente ejemplo:

<ul class="people_list"> {{#each people}} <li>{{this}}</li> {{/each}} </ul>

en el contexto de:

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

En mi caso, no tengo un nombre para la matriz, es solo el objeto raíz de la respuesta. Intenté usar {{#each}} sin suerte.

La primera vez que usé manubrios ... ¿qué me estoy perdiendo?

ACTUALIZAR

Aquí hay un violín simplificado para mostrar lo que estoy pidiendo: http://jsfiddle.net/KPCh4/2/

¿El manillar requiere que la variable de contexto sea un objeto y no una matriz?

Los manubrios pueden usar una matriz como contexto. Puedes usar como la raíz de los datos. Entonces puede recorrer los datos de su matriz con {{#each .}} .

.row { border: 1px solid red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div id="DocumentResults">pos</div> <script id="document-template" type="text/x-handlebars-template"> <div> {{#each .}} <div class="row"> <div class="col-md-12"> <h2>{{Category}}</h2> {{#DocumentList}} <p>{{DocumentName}} at {{DocumentLocation}}</p> {{/DocumentList}} </div> </div> {{/each}} </div> </script>

Puedes pasar this a cada bloque. Vea aquí: http://jsfiddle.net/yR7TZ/1/

{{#each this}} <div class="row"></div> {{/each}}

Quise decir en la llamada template() ..

Solo necesita pasar los resultados como un objeto. Entonces, en lugar de llamar

var html = template(data);

hacer

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

y usa {{#each apidata}} en tu código de plantilla

demo en http://jsfiddle.net/KPCh4/4/
( eliminado algunos restos if código se estrelló )

Usando this y {{this}} . Ver el código a continuación en node.js:

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

Salida de registro de consola:

<ul><li>James Bond</li><li>Dr. No</li><li>Octopussy</li><li>Goldeneye</li></ul>