代码之家 › 专栏 › 技术社区 › Craig

带组的jquery模板

jquery-templates jquery

Craig · 技术社区 · 15 年前

我正在尝试使用具有组头的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 回复 | 直到 15 年前

Nick Craver 15 年前

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前

Eliable · 使点击计数器和进度条协同工作

1 年前

mlri · 从不同的onclick事件执行相同的javascript函数

1 年前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

1 年前

Jack Maessen · 在处理程序上使用时如何获取输入类型

1 年前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

1 年前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

1 年前