jQuery模板:jQuery Templates Proposal(4)
模板语法
内嵌表达式
表达式可以用{%= ... %} 的语法形式插入，这个分隔符最大限度的减少了编码标记的机会，同时避免与现有的服务器端和客户端的扩展标记相冲突（例如：{%=...%}可能与ASP和 ASP.NET相冲突）。
示例
简单的数据插入：
<script type="text/html" id="tmp1">
<li>{%= last %}, {%= first %}</li>
</script>
表达式为javascript，你可以调用任何JavaScript函数用或使用更复杂的表达式。但是，注意，保持模板尽可能的简单是首选，后面要描述的两个回调有助于理解这些。
<script type="text/html" id="tmp1">
<li>{%= last + " " + first %}</li>
</script>
HTML插入
默认情况下，数据项在模板中被渲染时不会被HTML编码。如果你在一个模板中显示用户提交的数据，那么恶意用户就能够执行跨站点脚本攻击(XSS)。
注意下面代码中第一个产品的名字，第一个产品包含一个没有任何恶意的onClick事件处理程序，当数据项显示，有人点击了产品名字，JavaScript得到执行。
<script type="text/javascript">
jQuery(function(){
var products = [
{ name: "<a onclick='alert(\"do evil\")'>click here</a>", price: 12.99},
{ name: "Product 2", price: 9.99},
{ name: "Product 3", price: 35.59}
];
$("ul").append("#template", products);
});
</script>
<script id="template" type="text/html">
<li>{%= name %} - {%= price %}</li>
</script>
<ul></ul>
为了很容易的在一个模板中给要显示的数据进行HTML编码，使你免遭这种XSS的进攻，可以使用一个名为text()的内置函数。text()函数将一个数据项转换成文本节点。这里告诉你如何使用text()函数。
<script type="text/javascript">
jQuery(function(){
var products = [
{ name: "<a onclick='alert(\"do evil\")'>click here</a>", price: 12.99},
{ name: "Product 2", price: 9.99},
{ name: "Product 3", price: 35.59}
];
$("ul").append("#template", products);
});
</script>
<script id="template" type="text/html">
<li>{% text(name) %} - {%= price %}</li>
</script>
<ul></ul>
代码块
除了表达式，你可以在模板中插入代码执行自定义逻辑、条件或循环。代码块用{%....%}语法来分隔（没有=）。
示例
这个例子显示系列产品的name，如果有可用的“specials”则显示。
<script type="text/html" id="tmp1">
<li>
{%= name %}
{% if (specials.length) { %}
<ul>
{% for (var i = 0, l = specials.length; i < l; i++) { %}
<li>{%= specials[i].details %}</li>
{% } %}
</ul>
{% } %}
</li>
</script>
上下文
在模板中，你可以使用一个名叫$context 的特殊变量，这与提案后面要描述的rendering和rendered回调是同一个对象。$context具有以下属性：
你对$context 变量的修改在模板中将保持一致。例如，你可以在render()函数中给$context 变量添加计算字段。
function rendering(context) {
context.tax = context.dataItem.price * 0.23;
}
你可以在模板中使用tax计算字段，保持模板简单，避免需要调试的内嵌表达式。
<script type="text/html" id="tmp1">
The product with tax costs {%= $context.tax %}
</script>
你可以使用$context.options变量指向任何需要传递给render()和append()函数的选项。下面的示例演示了如何根据传递给append()函数的showSalePrice 参数值来显示正常价格或零售价格。
<script type="text/javascript">
jQuery(function() {
var products = [
{ name: "Product 1", price: 12.99, salePrice: 10.99 },
{ name: "Product 2", price: 9.99, salePrice: 7.99 },
{ name: "Product 3", price: 35.59, salePrice: 33.59 }
];
$("ul").append("#template", products, { showSalePrice: true });
});
</script>
<script id="template" type="text/html">
<li>
{%= name %} -
{%= $context.options.showSalePrice ? salePrice : price %}
</li>
</script>
<ul></ul>
注意如何在模板中根据$ context.options.showSalePrice属性来显示正常价格或零售价格。