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

利用Mustachei,想用以下模板来列举该目标:

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/

秘密引文载于以下声明节:{#others>/code>。

Answer 3

这一系列员额对我非常有益。 I m Building a Node.js app that used Plotly. 我想在我的服务器上生成一个可观的数据集,需要浏览器打电话。新该数据的档次。面临的挑战是如何为Plotly电话提供动态数据。我很难通过复杂的Plotly数据标语,但使用Mustache在组成部分阵列上的隔.是完美的,尽管我真的能动地生成 j。在服务器一上, Java印物体阵列的简单阵列如下:

tracexHash: data.x.map((value) => { return{ date : value} }),
traceyHash: data.y.map((value) => { return{ date : value} }),
tracezHash: data.z.map((value) => { return{ date : value} }),
tracecolorHash: data.marker.color.map((value) => { return{ value : value} }),

我的html案卷载有Mustache异构体的 j印。我在现场名称之前包括插座机,以避免超文本处理,因为我的数据显示日期代表,而前方的闪点将形成编码——并且通过。 Mustache: Global disable html escaping? for that information. 它很艰难,但达到了目标。

        let trace1 = {
            x: [ {{#tracexHash}} "{{&date}}" , {{/tracexHash}} ],
            y: [ {{#traceyHash}} "{{&date}}" , {{/traceyHash}}  ],
            z: [ {{#tracezHash}} "{{&date}}" , {{/tracezHash}}  ],
            mode:  markers ,
            type:  scatter3d ,
            marker: {
                color: [ {{#tracecolorHash}} "{{&value}}" , {{/tracecolorHash}}  ]
            }
        };
        let trace2 = {
            x: ["{{&first_pass_date}}"],
            y: ["{{&second_pass_date}}"],
            z: ["{{&interest_date}}"], 
            mode:  markers ,
            type:  scatter3d ,
            marker: {
                color: "darkblue",
                size: 20,
                opacity:60
            }
        }
        let data = [trace1, trace2];
        Plotly.newPlot( graphDiv , data, layout);

友情链接