代码之家 › 专栏 › 技术社区 › Undermine2k

Jquery将数组映射到模板中

mustache arrays jquery javascript

Undermine2k · 技术社区 · 10 年前

示例:附加Fiddle: http://jsfiddle.net/UNsDK/26/

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

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

在此阵列中 数据包1 和 数据包2 可以有不同的名称,但内部内容是一致的。

因此,我不能创建如下模板:

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

所以我试图用另一种方式将数据映射到一个数组中,并将其发送到模板,但它不起作用:也是我的看法对象正在丢失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 回复 | 直到 10 年前

Vadim 10 年前

您可以转换 obj.Cards 从映射到包含 id 和 data 最近 obj.Cards[id] 。这将允许您使用嵌套转发器。在这种情况下,您的代码可能是这样的:

JavaScript

function convert(obj) {
  var data = [],
      item,
      id,
      card,
      i;
  for(id in obj.Cards) {
    if(obj.Cards.hasOwnProperty(id)) {
      card = obj.Cards[id];
      item = {
        id: id,
        data: []
      };
      for(i=0; i<card.length; i++) {
        item.data.push( $.extend({},card[i]) );
      }
      data.push(item);
    }
  }
  return {Cards: data};
}

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

var template = '{{#Cards}}' +
                 '<div>{{id}}</div>' +
                 '<ul>' +
                   '{{#data}}<li>{{name}}: {{color}}</li>{{/data}}' +
                 '</ul>' +
               '{{/Cards}}';

var model = convert(obj);

$('body').append(Mustache.render(template, model));

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