中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

模板語(yǔ)法

內(nèi)嵌表達(dá)式

表達(dá)式可以用{%= ... %} 的語(yǔ)法形式插入，這個(gè)分隔符最大限度的減少了編碼標(biāo)記的機(jī)會(huì)，同時(shí)避免與現(xiàn)有的服務(wù)器端和客戶端的擴(kuò)展標(biāo)記相沖突（例如：{%=...%}可能與ASP和 ASP.NET相沖突）。

示例

簡(jiǎn)單的數(shù)據(jù)插入：

<script type="text/html" id="tmp1">
    <li>{%= last %}, {%= first %}</li>
</script>

表達(dá)式為javascript，你可以調(diào)用任何JavaScript函數(shù)用或使用更復(fù)雜的表達(dá)式。但是，注意，保持模板盡可能的簡(jiǎn)單是首選，后面要描述的兩個(gè)回調(diào)有助于理解這些。

<script type="text/html" id="tmp1">
    <li>{%= last + " " + first %}</li>
</script>

HTML插入

默認(rèn)情況下，數(shù)據(jù)項(xiàng)在模板中被渲染時(shí)不會(huì)被HTML編碼。如果你在一個(gè)模板中顯示用戶提交的數(shù)據(jù)，那么惡意用戶就能夠執(zhí)行跨站點(diǎn)腳本攻擊(XSS)。

注意下面代碼中第一個(gè)產(chǎn)品的名字，第一個(gè)產(chǎn)品包含一個(gè)沒(méi)有任何惡意的onClick事件處理程序，當(dāng)數(shù)據(jù)項(xiàng)顯示，有人點(diǎn)擊了產(chǎn)品名字，JavaScript得到執(zhí)行。

<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>

為了很容易的在一個(gè)模板中給要顯示的數(shù)據(jù)進(jìn)行HTML編碼，使你免遭這種XSS的進(jìn)攻，可以使用一個(gè)名為text()的內(nèi)置函數(shù)。text()函數(shù)將一個(gè)數(shù)據(jù)項(xiàng)轉(zhuǎn)換成文本節(jié)點(diǎn)。這里告訴你如何使用text()函數(shù)。

<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>

代碼塊

除了表達(dá)式，你可以在模板中插入代碼執(zhí)行自定義邏輯、條件或循環(huán)。代碼塊用{%....%}語(yǔ)法來(lái)分隔（沒(méi)有=）。

示例

這個(gè)例子顯示系列產(chǎn)品的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>

出處：
責(zé)任編輯：moby

上一頁(yè) jQuery模板提案 [6] 下一頁(yè) jQuery模板提案 [8]

◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。