Mustache peut-il itérer un tableau de niveau supérieur ?

Question

Mon objet ressemble à ceci :

['foo','bar','baz']

Et je veux utiliser un modèle de moustache pour en produire quelque chose comme ceci :

"<ul><li>foo</li><li>bar</li><li>baz</li></ul>"

Mais comment ? Dois-je vraiment le transformer en quelque chose comme ça d'abord ?

{list:['foo','bar','baz']}

Answer 1

Vous pouvez le faire comme ça...

Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>', ['foo','bar','baz']);

Ça marche aussi pour des choses comme ça...

var obj = [{name: 'foo'}, {name: 'bar'}];
var tmp = '<ul>{{#.}}<li>{{name}}</li>{{/.}}</ul>';
Mustache.render(tmp, obj);

Answer 2

J'ai eu le même problème ce matin et après un peu d'expérimentation, j'ai découvert que vous pouvez utiliser le {{.}} pour faire référence à l'élément courant d'un tableau :

<ul>
  {{#yourList}}
  <li>{{.}}</li>
  {{/yourList}}
</ul>

Answer 3

En se basant sur la réponse de @danjordan, ceci fera ce que vous voulez :

Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);

retour :

<ul><li>foo</li><li>bar</li><li>baz</li></ul>

Answer 4

Voici des exemples pour rendre un tableau multidimensionnel dans un modèle :

Exemple 1

'use strict';

var Mustache = require('mustache');

var view = {test: 'div content', multiple : ['foo', 'bar'], multiple_2 : ['hello', 'world']};
var template = '<div>{{test}}</div><ul>{{#multiple}}<li>{{.}}</li>{{/multiple}}</ul><ul>{{#multiple_2}}<li>{{.}}</li>{{/multiple_2}}</ul>';

var output = Mustache.render(template, view);

console.log(output);

Exemple 2

'use strict';

var Mustache = require('mustache');

var view = {test: 'div content', multiple : [{name: 'foo', gender: 'male'}, {name: 'bar', gender: 'female'}], multiple_2 : [{text: 'Hello', append: '**', prepend: '**'}, {text: 'World', append: '**', prepend: '**'}]};
var template = '<div>{{test}}</div><ul>{{#multiple}}<li>Hello my name is {{name}}. And I am {{gender}}</li>{{/multiple}}</ul><ul>{{#multiple_2}}<li>{{prepend}}_{{text}}_{{append}}</li>{{/multiple_2}}</ul>';

var output = Mustache.render(template, view);

console.log(output);

Pour le test, sauvegardez les exemples ci-dessus dans un fichier appelé 'test.js', exécutez la commande suivante dans la ligne de commande.

nodejs test.js

Answer 5

La solution la plus simple pour un tableau nommé Strengths :

{
   "ViewModel": 
    {
       "StrengthsItems": 
        {
           "Strengths": ["Dedicated", "Resourceful", "Professional", "Positive"]
        }
    }
}

fonctionne pour moi comme un charme est le suivant :

{{#ViewModel.StrengthsItems}}
    <p class="p4">{{Strengths}}</p>
{{/ViewModel.StrengthsItems}}