胡子模板使用对象

Question

我想模板对象的下列数组的数组：

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

我该数组转换为对象，像这样：

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

这给了我以下object：

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

使用胡子我想用下列模板枚举该对象：

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

您需要使用小胡子的内置迭代功能：

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}}