使用对象数组的Mustache模板

Mustache templating with an array of objects

本文关键字：Mustache 模板 数组 对象      更新时间：2023-09-26

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

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/

您可以使用数组模板：

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

您需要使用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}}

中

这一系列的帖子对我很有帮助。我正在构建一个使用Plotly的Node.js应用程序。我想在服务器上生成一个相当大的数据集，需要浏览器对该数据调用Plotly.newPlot。挑战在于如何为Plotly调用提供动态数据。我在传递复杂的Plotly数据对象时遇到了问题，但在组件数组上使用Mustache的迭代可以完美地工作，尽管我实际上是在动态生成javascript。在服务器上，我将简单的数组映射到Javascript对象的数组：

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迭代标记的javascript。由于我的数据是字符串日期表示，并且正斜杠会被编码，所以我在字段名之前包含了与号，以避免HTML转义——多亏了Mustache：全局禁用HTML转义？以获取该信息。这有点费力，但达到了目的。

        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);
相关文章：