3

我的 JSON 数据源如下所示：

{"1":{
    "name":"One",
    "color":"red"
},
{"2":{
    "name":"Two",
    "color":"green"
}

我正在尝试使用 mustache.js 遍历这些记录。

var model = [{"1":{"name":"One","color":"red"},{"2":{"name":"Two","color":"green"}];
var template = '<ul> {{#.}} <li>{{name}} -- {{color}} </li> {{/.}} </ul>';
var html = Mustache.to_html(template, model);
console.log(html);

但我不知道如何访问名称和颜色。有任何想法吗？

4

3 回答 3

1

如果你有这样的对象数组并使用一个简单的{{#.}} <li>{{name}} -- {{color}} </li> {{/.}}循环，那就更简单了：

var myCars = 
[
{"index":1,"name":"One", "color":"red" }},
{"index":2,"name":"Two", "color":"green" }}
];

另一种方法是构建一个迭代器来解开每个项目：

这里的例子：http: //jsfiddle.net/9qMqW/2/

var myCars = 
[
{"1":{ "name":"One", "color":"red" }},
{"2":{ "name":"Two", "color":"green" }}
];

// decorate the array with the iterator function
myCars.getNextCar = function(){ 
    !myCars.i ? myCars.i=1 : ++myCars.i;
    return(myCars[myCars.i-1][myCars.i])
};

var template = $("#carsTemplate").html();

$("#carsContainer").html(Mustache.render(template,{cars:myCars}));

您的 HTML 将是：

<div id="carsContainer">
    
</div>

<script id="carsTemplate" type="text/plain">
    <ul> 
        {{#cars}} 
            {{#cars.getNextCar}}
            <li>{{name}} -- {{color}}</li>
            {{/cars.getNextCar}}
        {{/cars}}
    </ul>
</script>

请注意，getNextCar它将在您的对象中创建一个迭代器的方法，因此如果您多次使用，则必须获得一个新的迭代器。或者只是按照其他海报的建议更改数组内容。

附带说明一下，您可能想看看http://handlebarsjs.com/，它更健壮，语法更灵活。

于 2013-06-21T04:42:47.377 回答
1 
var model = [ 
             {"1":{"name":"One","color":"red"}},
             {"2":{"name":"Two","color":"green"}}
            ];
var model4view = {dots:
    model.map(function(obj){
        var v; for (k in obj) {v = obj[k];}; return v; })};

template = "'<ul> {{#dots}} <li>{{name}} -- {{color}} </li> {{/dots}} </ul>'";
var html = Mustache.to_html(template, model4view);

AFAIK，参考mustache 手册页 Sections是允许一次或多次渲染文本块的标签类型，但该部分的行为由键的值决定。所以我们需要一个键和一个值，即列表。因此数组必须是键的值。

在上面的代码中，我利用Array.prototype.map() 来获取一个model4view具有任意名称的键dots：(所以我们可以在 mustache 部分标记中使用这个名称{{#dots}}和一个由原始编号数组的对象值组成的值项目值。例如：

{"dots":[
         {"name":"One","color":"red"},
         {"name":"Two","color":"green"}
        ]}

[编辑] 如果您还需要输出与每个项目关联的数字，您可以使用 map 函数：

function(v){
    for (var property in v) { 
      o = v[property];
      o['id'] = property;
      return(o); 
  }});

这样，该数字可以在模板中用作{{id}}.

这是我的小提琴，您可以在其中尝试解决解决方案。

于 2013-06-15T10:27:23.150 回答
0

这是最简单的解决方案，如果您知道模型中的键总是看起来像 1,2,3,...：

var model = [{"1":{"name":"One","color":"red"}},{"2":{"name":"Two","color":"green"}}];
var i, len = model.length;
for (i=0; i<len; i++) {
  model[i] = model[i][i+1];
}

请注意，您缺少模型上的结尾卷曲。

于 2013-06-20T15:38:28.493 回答