使用mustache.js有編號的陣列

我的JSON數據源看起來是這樣的：使用mustache.js有編號的陣列

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

但我不知道如何訪問名稱和顏色。有任何想法嗎？

來源

2012-11-09 thv20

代碼乾淨簡單，但JSON不是。用數字命名變量絕不是一件好事，儘管在JS中完全有效。您可以輕鬆刪除「1」和「2」，並讓您的代碼按照以下答案中提到的方式工作。如果您無權修改JSON，則可以在將模型傳遞給鬍子之前修剪模型，如d4kris所述。 – joshbennett

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 manual page節是允許呈現一次或多次文本塊的標記的類型，但截面的行爲由的值確定鍵。所以我們需要一個鍵和一個值是列表。因此該數組必須是密鑰的值。

在上面的代碼中，我利用Array.prototype.map() 得到model4view具有關鍵一個任意名稱：dots（所以我們可以使用小鬍子節標記{{#dots}}這個名字和值是由物體。原始數列陣列項目值的值例如：

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

[編輯] 如果需要輸出也可以使用地圖功能的每個項目相關聯的NUMER：

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

這樣的數量可以在模板中使用{{id}}。

Here is my fiddle在這裏你可以嘗試和解決方案。

來源

2013-06-15 10:27:23

只需編輯以鏈接[sample fiddle]（http://jsfiddle.net/rondinif/MdxNU/1/）並顯示如何保留輸出項目的編號。我會報告一個類似的[回答問題]（http://stackoverflow.com/a/13464164/1657028），最終他們會改變數據返回的方式來使**鬍子**模板工作。 –

這是最簡單可行的解決方案，如果你知道你的模型的鑰匙總是看起來像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-20 15:38:28 d4kris

，如果你有你的對象數組這樣它會更容易，用一個簡單的{{#.}} <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 method supporting the exotic indexing 
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-21 04:42:47

使用mustache.js有編號的陣列

回答

相關問題