Jquery映射数组到模板中

时间:2014-02-24 05:42:46

标签: javascript jquery arrays mustache

Ex:附上小提琴:http://jsfiddle.net/UNsDK/26/

我有一个名为Cards的对象,其中包含包含数组的对象。我不知道索引标题是什么,因为对象可能对任何用户都不同:

 var obj = {'Cards':  {"Pack1":[{"name":"John","color":"red"}],
                       "Pack2":[{"name":"Smith","color":"green"}]}};

在此数组 Pack1 中, Pack2 可能有不同的名称,但内部内容是一致的。

因此我无法生成如下模板:

{{#Cards}}
{{#Pack1}}{{name}} {{color}} {{/Pack1}}
{{#Pack2}}{{name}} {{color}} {{/Pack2}}
..
{{/Cards}}

所以我试图通过将数据映射到一个数组并将其发送到模板然后它不起作用来以不同的方式执行它:我的视图对象也丢失了我的索引卡片对象。

var len = $.map(obj.Cards, function(n, i) { return i; }).length;
console.log('Length of Cards object is ' + len);
var view = {};
view["Packs"] =$.map(obj.Cards, function(n, pack_name) { 
    console.log('this is:'+pack_name);
    for (var key in n) { 
        var obj = n[key];
        for (var prop in obj) {
            // important check that this is objects own property 
            // not from prototype prop inherited
            if(obj.hasOwnProperty(prop)) {
                console.log(prop + " = " + obj[prop]);
                return prop = obj[prop];
            }
        }
    }           
}); //end map

var template = '<ul> {{#Packs}} <li>{{id}} : {{name}} -- {{color}} </li> {{/Packs}} </ul>';
var html = Mustache.to_html(template, view);
var json = JSON.stringify(view); 
$('#sampleArea').html(html);

1 个答案:

答案 0 :(得分:1)

您可以将obj.Cards从地图转换为包含最近id的{​​{1}}和data的对象数组。这将允许您使用嵌套的中继器。在这种情况下,您的代码可能是这样的:

<强>的JavaScript

obj.Cards[id]

JSBin:http://jsbin.com/zujiqoyi/1/edit