带有组的 jQuery 模板答案

【问题标题】：jQuery templates with groups带有组的 jQuery 模板
【发布时间】：2010-11-29 11:46:29
【问题描述】：

我正在尝试使用具有组标题的 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>

我注意到如何正确设置模板来实现这一点。

【问题讨论】：

标签： jquery jquery-templates

【解决方案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");

You can test it out here.

当然，更好的选择是在服务器端执行该枢轴（并且可能以不同的格式使用整体数组...这将简化模板），不确定这是否是一个选项。

【讨论】：