Усы-шаблоны с массивом предметов - PullRequest
Новая
       4

Усы-шаблоны с массивом предметов

6 голосов
/ 13 января 2012

Я пытаюсь шаблонизировать следующий массив объектов: 

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

Используя Усы, я хочу перечислить этот объект следующим шаблоном: 

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/

Ответы [ 2 ]

18 голосов
/ 13 января 2012

Вы можете использовать шаблон для массивов: 

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});
5 голосов
/ 13 января 2012

Вам необходимо использовать встроенные в 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}}

...