jquery 使用对象数组进行Mustache模板化

tjvv9vkg  于 2023-06-22  发布在  jQuery
关注(0)|答案(3)|浏览(110)

我正在尝试创建以下对象数组的模板:

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/

oprakyz7

oprakyz71#

您可以使用数组模板:

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

lg40wkob2#

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

0s0u357o

0s0u357o3#

这一系列的文章对我很有帮助。我正在构建一个使用Plotly的Node.js应用程序。我想在我的服务器上生成一个相当大的数据集,并且需要浏览器调用Plotly.newPlot来处理这些数据。挑战在于如何为Plotly调用提供动态数据。我在传递复杂的Plotly数据对象时遇到了麻烦,但是在组件数组上使用Mustache的迭代可以完美地工作,即使我实际上是动态生成javascript。在服务器上,我将简单数组Map为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转义,因为我的数据是字符串Date表示,正斜杠将被编码--感谢Mustache: Globally disable html escaping?提供的信息。这是一个有点费力,但达到了目标。

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

相关问题