帶組的jQuery模板

我正在使用試圖使用具有組頭的jQuery模板插件創建模板。 由於是數據驅動，因此在手之前未知組標題。我有模板是：帶組的jQuery模板

<div class='category'>${Category}</div> 
<div class='service'><a service_id='${Id}'>${Name}</a></div>

我的數據是：

var movies = [ 
    { Name: "Meet Joe Black", Category: "First", Id: 1 }, 
    { Name: "The Mighty", Category: "First", Id: 2 }, 
    { Name: "City Hunter", Category: "First", Id: 3 }, 
    { Name: "A movie", Category: "Second", Id: 4 }, 
    { Name: "Blade Runner", Category: "Third", Id: 5 } 
];

我所要的輸出是

<div class='category'>First</div> 
<div class='service'><a service_id='1'>Meet Joe Black</a></div> 
<div class='service'><a service_id='2'>The Mighty</a></div> 
<div class='service'><a service_id='3' >City Hunter</a></div> 

<div class='category'>Second</div> 
<div class='service'><a service_id='4'>A movie</a></div> 

<div class='category'>Third</div> 
<div class='service'><a service_id='5'>Blade Runner</a></div>

我注意到知道如何正確設置模板爲了達成這個。

來源

2010-11-29 Craig

您將需要圍繞轉動你的數據，這樣的事情：

var categories = {}; 
$.each(movies, function(i, m) { 
    if(!categories[m.Category]) categories[m.Category] = [m]; 
    else categories[m.Category].push(m); 
});

然後設置你的模板循環儘管例如：

<script id="mTemplate" type="text/x-jquery-tmpl"> 
    {{each(category, movies) $data}} 
    <div class='category'>${category}</div> 
     {{each(index, movie) movies}} 
     <div class='service'><a service_id='${movie.Id}'>${movie.Name}</a></div> 
     {{/each}} 
    {{/each}} 
</script>

然後你只需要調用您的模板傳遞的是將數據對象作爲唯一參數，如下所示：

$("#mTemplate").tmpl(categories).appendTo("#output");

You can test it out here。

當然是更好的選擇是做支點服務器端（也可能是使用數組整體不同的格式...這將簡化模板），不知道這是一個選項或沒有。

來源

2010-11-29 12:08:02

帶組的jQuery模板

回答

相關問題