Шаблоны jQuery с группами - PullRequest
Новая
       3

Шаблоны jQuery с группами

2 голосов
/ 29 ноября 2010

Я пытаюсь создать шаблон, используя шаблонный плагин 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>

Я уверен, что правильно настроить шаблон для достижения этой цели.

1 Ответ

6 голосов
/ 29 ноября 2010

Вам нужно будет развернуть ваши данные, что-то вроде этого: 

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

Вы можете проверить это здесь .

Конечно, лучший вариантсделать это на стороне сервера (и, возможно, в другом формате, используя массив в целом ..., что упростит шаблон), не уверенный, если это опция или нет.

...