グループを含むjQueryテンプレート

Question

グループヘッダーを持つ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> 

になりたい私が正しくテンプレートを設定する方法がわから注意していますこれを達成する。

Answer 1

あなたは、周りにこのような何かを、あなたのデータをピボットする必要があります：

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

このように、データオブジェクトを唯一の引数としてピボットしました。。もちろん

---

より良いオプションは（そしておそらく全体的な配列を使用して、異なるフォーマットで...それは、テンプレートを単純化する）ことピボットサーバー側を行うことです、それはオプションだかどうかわかりません。