嵌套模板
利用回调函数,你可以创建其嵌套模板。例如,下面代码显示了如何显示联系人名单,每个联系人有一个或多个电话号码。contactTemplate 用来显示联系人名单,phoneTemplate 用来显示每个电话号码。
<script type="text/javascript">
$(function() {
var contacts = [
{ name: "Dave Reed", phones: ["209-989-8888", "209-800-9090"] },
{ name: "Stephen Walther", phones: ["206-999-8888"] },
{ name: "Boris Moore", phones: ["415-999-2545"] }
];
$("div").append("#contactTemplate", contacts, {rendered:rendered});
});
function rendered(context, dom) {
$("div.phones", dom)
.append("#phoneTemplate", context.dataItem.phones);
}
</script>
<script id="contactTemplate" type="text/html">
<div>
{%= name %}
<div class="phones"></div>
</div>
</script>
<script id="phoneTemplate" type="text/html">
<div>
Phone: {%= $context.dataItem %}
</div>
</script>
<div></div>
创建插件
假设你想在模板中使用插件--如jQuery UI Datepicker。此外,想象以下,你希望插件显示数据项的值。例如,你希望DatePicker 默认显示数据项的一个date属性。在这种情况下,你需要利用rendered()回调创建插件并用数据项的值初始化插件。
例如,下面的代码显示联系人的名单,rendered() 用来创建一个jQuery UI Datepicker插件,并在模板中的一个input元素中附加插件。DataPicker 的默认值为联系人的生日。
<script type="text/javascript">
$(function() {
var contacts = [
{ name: "Dave Reed", birthdate: new Date("12/25/1980") },
{ name: "Stephen Walther", birthdate: new Date("12/25/1977") },
{ name: "Boris Moore", birthdate: new Date("12/25/1934") },
{ name: "Eilon Lipton", birthdate: new Date("12/25/2004") },
{ name: "Assad Safiullah", birthdate: new Date("12/25/1954") }
];
$("div").append("#template", contacts, { rendered: rendered });
});
function rendered(context, dom) {
$("input", dom)
.datepicker({ defaultDate: context.dataItem.birthdate })
}
</script>
<script id="template" type="text/html">
<div>
{%= name %}
<br />
birthdate: <input />
</div>
</script>
<div></div>
无表达式模板
如果你不想任何诸如{%=....%}的表达式出现在模板中,你可以在模板实例中使用rendered函数动态的为一个元素赋值。例如,下面模板显示产品清单。注意,模板只包含HTML标记,没有表达式。
讨论(Discussion)
这些都是在论坛讨论中提出的问题。
HTML编码
在目前的提案中,数据项默认是不被编码的。这意味着,除非你采取额外的行为,用模板显示用户提交的数据的文档将为跨站点脚本(XSS)攻击大开门户。在早期的提案中,我们讨论为HTML编码内容创建一个诸如{!productName }特别分隔符。在目前的提案中,我们建议使用text()模板函数,而不是用{%= text(productName) %} 。
脚本与样式模板容器
在目前的提案中,我们建议在<script id="template" type="text/html"></script>元素中包裹模板。有人提议,较好的选择是用<style id="template" type="text/html"></style>元素,因为样式更好的体现了模板表象的性质。
样式元素的缺点在于不允许出现在文档的body中,如果你不能修改head元素的内容--例如,你正在使用内容管理系统(CMS)工作,你就无法创建模板。
从技术上讲,当前的提案与用SCRIPT或STYLE包裹模板是兼容的。如果你愿意,你可以使用Style元素并替换type属性。
模板应是真正的DOM元素
只有几个人建议模板应代表真正的DOM元素,这也与ASP . NET Ajax 库创建模板的方法相似。换句话说,给模板使用标准的DOM元素,用display:none隐藏模板。
使用真正的DOM元素模板的主要缺点在于使用真正的DOM元素会导致不良副作用。例如,考虑下面的代码:
<div id="template" style="display:none">
<img src="{%= imageUrl %}" />
<br /> {% imageTitle %}
</div>