Modèles jQuery avec groupes

Question

J'essaie d'utiliser un template avec le plugin template jQuery qui a un en-tête de groupe. Les en-têtes de groupe ne sont pas connus auparavant comme il est piloté par les données. Le modèle que j'ai est:

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

Les données que j'ai est:

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

Je veux que la sortie soit

<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> 

Je suis noter que comment configurer correctement le modèle pour y parvenir.

Answer 1

Vous devez faire pivoter vos données autour, quelque chose comme ceci:

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

Ensuite, la configuration de votre modèle en boucle si, par exemple:

<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> 

Ensuite, vous appelez simplement votre passage de modèle qui objet de données pivoté comme seul argument, comme ceci:

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

You can test it out here.

---

Bien sûr, la meilleure option est de le faire pivoter côté serveur (et peut-être dans un format différent en utilisant un tableau d'ensemble ... qui simplifierait le modèle), pas sûr que ce soit une option ou non.