带有对象数组的 Mustache 模板

Question

我正在尝试对以下对象数组进行模板化：

var arr = [{name:"Ryan Pays", url:"http://www.ryanpays.com"}, {name:"foo", url:"http://www.google.com"}];

我将该数组转换为这样的对象：

arr = $.extend({}, arr);

这给了我以下对象：

{
0:{name:"Ryan Pays", url:"http://www.ryanpays.com"},
1:{name:"foo", url:"http://www.google.com"}
}

使用 Mustache 我想使用以下模板枚举该对象：

var template = "<h4>Your friends' choices</h4>" +
               "<ul>" +
               "<li>" +
               "<p><strong>{{name}}</strong> likes <a href='{{url}}'>this</a></p>" +
               "</li>" +
               "</ul>";
var html = Mustache.to_html(template, displayData);
$('.choices').html(html);

我似乎无法做到这一点。我可以得到像这样打印的第一个结果：

var html = Mustache.to_html(template, displayData[0]);

依此类推，但不是两者兼而有之。

链接到这个问题的小提琴：

http://jsfiddle.net/AtJDa/

Answer 1

您可以使用数组模板：

var template = "<h4>Your friends' choices</h4>" +
    "<ul>" +
           "{{#arr}}"+
           "<li>" +
           "<p><strong>{{name}}</strong> likes <a href='{{url}}'>this</a></p>" +
           "</li>" +
           "{{/arr}}"+
    "</ul>";
var html = Mustache.to_html(template, {arr:arr});

Answer 2

您需要使用 Mustache 的内置迭代功能：

var template = "<h4>Your friends' choices</h4>" +
               "<ul>{{#friends}}" +
                 "<li>" +
                   "<p><strong>{{name}}</strong> likes <a href='{{url}}'>this</a></p>" +
                 "</li>" +
               "{{/friends}}</ul>";

var data = {friends: [{name:"Ryan Pays", url:"http://www.ryanpays.com"}, {name:"foo", url:"http://www.google.com"}]};

var html = Mustache.to_html(template, data);

http://jsfiddle.net/AtJDa/1/

秘诀在部分声明{{#friends}}