带有组的jQuery模板
带有组的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>我很确定如何正确设置模板以实现这一点。
回答 1
Stack Overflow用户
回答已采纳
发布于 2010-11-29 12:08:02
您需要将数据围绕在一起，如下所示：
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");你可以在这里测试。
当然，更好的选择是执行枢轴服务器端(可能使用数组overall...that以不同的格式简化模板)，不确定这是否是一个选项。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4303399
复制相关文章
相似问题
腾讯云开发者
