Question

我的对象如下：

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

我想用胡子模板从中产生这样的东西：

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

但是怎么样？我真的必须先把它搞得像这样吗？

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

Answer 1

你可以这样做......

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

它也可以用于这样的事情......

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

Answer 2

今天早上我遇到了同样的问题，经过一些实验后我发现你可以使用{{。}}来引用数组的当前元素：

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

Answer 3

在@ danjordan的答案的基础上，这将做你想要的：

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

返回：

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

Answer 4

以下是在模板中渲染多维数组的示例：

示例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);

示例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);

对于测试运行，将以上示例保存在名为＆＃39; test.js＆＃39;的文件中，在命令行中运行以下命令

nodejs test.js

Answer 5

名为 Strengths 的数组的最简单解决方案：

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

对我来说就像一个魅力如下：

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

Answer 6

我不认为小胡子可以做到这一点！（出奇）您可以迭代一个对象列表，然后访问每个对象的属性，但您似乎无法迭代一个简单的值列表！

因此，您必须将列表转换为：

[ {"value":"foo"},{"value":"bar"},{"value":"baz"} ]

然后你的模板将是：

<ul>
  {{#the_list}}
  <li>{{value}}</li>
  {{/the_list}}
</ul>

对我来说，这似乎是Mustache的一个严重问题 - 任何模板系统都应该能够遍历一个简单值列表！

小胡子可以迭代一个顶级数组吗？

6 个答案: