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" }}
];

もう 1 つの方法は、イテレータを作成して各アイテムをアンラップすることです。

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

私の知る限り、口ひげのマニュアルページを参照して セクションは、テキストのブロックを1回以上レンダリングできるタグのタイプですが、セクションの動作はキーの値によって決まります。そのため、リストであるキーと値が必要です。したがって、配列はキーの値でなければなりません。

上記のコードでは、Array.prototype.map()を利用して、任意の名前のキーmodel4viewを持つ を取得します: ( そのため、この名前を口ひげセクション タグで使用し、元の番号付き配列のオブジェクト値で構成される値を使用できます。アイテムの値。例:dots{{#dots}}

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

[編集] 各アイテムに関連付けられた数値も出力する必要がある場合は、マップ関数を使用できます。

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

このようにして、番号をテンプレートで として使用できます{{id}}。

これは、ソリューションを試して遊ぶことができる私のフィドルです。

于 2013-06-15T10:27:23.150 に答える