web-dev-qa-db-fra.com

tableau de guidons de l'objet json

j'ai besoin de modèle avec un guidon un tableau d'objet json: (par chrome) [objet, objet, objet, objet] où chaque objet est composé par cette propriété: nom, nom de famille, etc.

J'ai compris qu'il est impossible de mettre un tableau d'objets dans le guidon mais nous devons créer un objet unique avec toutes les propriétés de tous les objets du tableau. Quelqu'un peut-il me suggérer une fonction pour le créer

jsonhandlebars.js
27
Stefano Maglione

Vous pouvez définir votre tableau en tant que propriété d'un objet wrapper lors de l'appel du modèle.

Par exemple, avec objects comme propriété de détention

var an_array = [
    {name: "My name"},
    {name: "Another name"}
];

var source   = /* a template source*/;
var template = Handlebars.compile(source);
var wrapper  = {objects: an_array};

console.log(template(wrapper));

et votre modèle peut utiliser cette propriété comme suit:

<ul>
    {{#each objects}}
        <li>{{name}}</li>
    {{/each}}
</ul>

Et une démo http://jsfiddle.net/YuvNY/1/

var an_array=[
    {name:"My name"},
    {name:"Another name"},    
];

var source   = $("#src").html();
var template = Handlebars.compile(source);
$("body").append( template({objects:an_array}) );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>

<script type='text/template' id='src'>
<ul>
  {{#each objects}}
      <li>{{name}}</li>
  {{/each}}
</ul>    
</script>

Ou vous pouvez passer directement le tableau au modèle et appeler l'assistant each avec le contexte défini sur . (un point)

var template = Handlebars.compile(source);
console.log(template(an_array));

<ul>
    {{#each .}}
        <li>{{name}}</li>
    {{/each}}
</ul>

http://jsfiddle.net/nikoshr/YuvNY/32/

var an_array=[
    {name:"My name"},
    {name:"Another name"},    
];

var source   = $("#src").html();
var template = Handlebars.compile(source);
$("body").append( template(an_array) );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>

<script type='text/template' id='src'>
<ul>
  {{#each .}}
      <li>{{name}}</li>
  {{/each}}
</ul>    
</script>
90
nikoshr