Mustachejs divers objets dans la vue

Question

J'ai un objet avec un tableau de données dans {}, je veux imprimer l'attribut name de tous les params.

L'objet est:

[ 

{ 
    "name": "Chris", 
    "value": 10000, 
    "taxed_value": 10000 - (10000 * 0.4), 
    "in_ca": true 
}, 

{ 
    "name": "Estafanie", 
    "value": 14000, 
    "taxed_value": 10000 - (10000 * 0.4), 
    "in_ca": true 
}, 

{ 
    "name": "Paul", 
    "value": 20000, 
    "taxed_value": 10000 - (10000 * 0.4), 
    "in_ca": true 
} 
] 

Je veux voir dans mon html:

Chris, Estefanie, Paul 

J'essaie avec:

{{# _.each(name, function(listname){ }} 
     <div class="col-md-3 col-sm-4 col-xs-4"> 
     <div class="names"> 
      <h5>{{{ listname }}}</h5> 
     </div> 
     </div> 
    {{# }) }} 

Mais ne fonctionne pas,/je trouve dans la moustache documentation mais je ne vois rien pareil.

Tout le monde peut m'aider avec ça?

Merci

Answer 1

Votre vue ne ressemble pas à une vue MustacheJS. Modifier pour ressembler à ce qui suit. Remplacer "ObjectLiteralName" pour le nom de votre nom de variable littérale de l'objet.

L'utilisation de {{#}}{{/}} dans une vue Moustache indique que vous souhaitez effectuer une boucle sur un objet.

Voir MustacheJS. Il contient toutes les informations dont vous avez besoin pour démarrer avec Moustache.

Voir

<div id="target">Loading...</div> 
<script id="template" type="x-tmpl-mustache"> 
    {{#ObjectLiteralName}} 
    <div class="col-md-3 col-sm-4 col-xs-4"> 
     <div class="names"> 
     {{name}} 
     </div> 
    </div> 
    {{/ObjectLiteralName}} 
</script> 

Javascript

function renderTemplate() { 
    var $template = $('#template').html(); 
    Mustache.parse($template); // optional, speeds up future uses 
    var rendered = Mustache.render($template, ObjectLiteralName); 
    $('#target').html(rendered); 
} 

Résultat

<div class="col-md-3 col-sm-4 col-xs-4"> 
    <div class="names"> 
    Chris 
    </div> 
</div> 
<div class="col-md-3 col-sm-4 col-xs-4"> 
    <div class="names"> 
    Estefanie 
    </div> 
</div> 
<div class="col-md-3 col-sm-4 col-xs-4"> 
    <div class="names"> 
    Paul 
    </div> 
</div>