模板语法

内嵌表达式

表达式可以用{%= ... %} 的语法形式插入，这个分隔符最大限度的减少了编码标记的机会，同时避免与现有的服务器端和客户端的扩展标记相冲突（例如：{%=...%}可能与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>

出处：Denis'Blog
责任编辑：moby

上一页 jQuery模板提案 [6] 下一页 jQuery模板提案 [8]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。