ホームページ > 記事 > ウェブフロントエンド > jQuery .tmpl(), .template() 学習教材まとめ_jquery
jQuery .tmpl(), .template() 学習教材まとめ_jquery
- WBOYオリジナル
- 2016-05-16 18:04:371243ブラウズ
<p>昨晚无意中发现一个有趣的jQuery插件.tmpl()，其文档在<a href="http://api.jquery.com/tmpl" target="_blank">这里</a>。官方解释对该插件的说明：将匹配的第一个元素作为模板，render指定的数据，签名如下:</p>
<div class="cnblogs_Highlighter">
<div class="syntaxhighlighter nogutter jscript" id="highlighter_134820">
<div class="lines">
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain">.tmpl([data,][options])</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<p>其中参数data的用途很明显：用于render的数据，可以是任意js类型，包括数组和对象。options一般情况下都是选项了，官方指出，此处的options是一个用户自定义的键值对的map，继承自tmplItem数据结构，适用于模板render动作期间。</p>
<p>在<a href="http://github.com/jquery/jquery-tmpl" target="_blank">这里</a>可以下载到最新的tmpl插件，值的一提的是，官方同时也说明了，tmpl目前是beta版，使用需谨慎..</p>
<p>好吧，先来一个最直观的例子：<br></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="21966" class="copybut" id="copybut21966" onclick="doCopy('code21966')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code21966"> <br><%@ Page Language="C#" AutoEventWireup="true" %> <br><!DOCTYPE html> <br><html> <br><head> <br><title>jquery template demo</title> <br><link rel="stylesheet" href="content/site.css" type="text/css" /> <br><link rel="stylesheet" href="content/jquery.ui.css" type="text/css" /> <br><script type="text/javascript" src="scripts/jquery.js"></script> <br><script type="text/javascript" src="scripts/jquery.ui.js"></script> <br><script type="text/javascript" src="scripts/jquery.tmpl.js"></script> <br><script id="myTemplate" type="text/x-jquery-tmpl"> <br><tr><td>${ID}</td><td>${Name}</td></tr> <br></script> <br><script type="text/javascript"> <br>$(function () { <br>var users = [{ ID: 'think8848', Name: 'Joseph Chan' }, { ID: 'aCloud', Name: 'Mary Cheung'}]; <br>$('#myTemplate').tmpl(users).appendTo('#rows'); <br>}); <br></script> <br><style type="text/css"> <br>body <br>{ <br>padding: 10px; <br>} <br>table <br>{ <br>border-collapse: collapse; <br>} <br></style> <br></head> <br><body> <br><table cellspacing="0" cellpadding="3" border="1"> <br><tbody id="rows"> <br></tbody> <br></table> <br></body> <br></html> <br>
</div>
<p><img alt="" src="http://files.jb51.net/upload/201107/20110718011317244.jpg"></p>
<p>例子虽然很小也很简单，但我觉得这个已经很有用了。</p>
<p>当然，.tmpl()还可以使用来自<strong>远端的数据</strong>，比如说服务:<br></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="13680" class="copybut" id="copybut13680" onclick="doCopy('code13680')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code13680"> <br>public ActionResult SampleData() <br>{ <br>var json = new JsonResult(); <br>json.Data = new[] { new { ID = "remote1", Name = "abcd" }, new { ID = "remote2", Name = "efg" } }; <br>json.JsonRequestBehavior = JsonRequestBehavior.AllowGet; <br>return json; <br>} <br>
</div> <br>这是一个MVC的Action，我把它当做是一个提供数据的服务，然后js代码如下: <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="91653" class="copybut" id="copybut91653" onclick="doCopy('code91653')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code91653"> <br>$('#btnAjax').click(function () { <br>$.getJSON('@Url.Action("SampleData", "Home")', function (json) { <br>$('#rows').empty(); <br>$('#myTemplate').tmpl(json).appendTo('#rows'); <br>}); <br>}); <br>
</div> <br>
<p>效果:</p>
<p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318907.jpg"></p>
<p><strong>定义模板</strong>时，推荐的方式为定义使用</p>
<div class="cnblogs_Highlighter">
<div class="syntaxhighlighter nogutter jscript" id="highlighter_539169">
<div class="lines">
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain"><script id=</CODE><CODE class="jscript string">'templateName'</CODE> <CODE class="jscript plain">type=</CODE><CODE class="jscript string">'text/x-jquery-tmpl'</CODE><CODE class="jscript plain">></script></code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<p>做为模板的包装器，但定义方式并不只有这一种，你可以使用</p>
<div class="cnblogs_Highlighter">
<div class="syntaxhighlighter nogutter xml" id="highlighter_64121">
<div class="lines">
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content">
<code class="xml plain"><</CODE><CODE class="xml keyword">div</CODE> <CODE class="xml color1">id</CODE><CODE class="xml plain">=</CODE><CODE class="xml string">"template"</CODE> <CODE class="xml color1">style</CODE><CODE class="xml plain">=</CODE><CODE class="xml string">"display: none;"</CODE><CODE class="xml plain">> </code><code class="xml comments"><!-- markup --></code><code class="xml plain"></</CODE><CODE class="xml keyword">div</CODE><CODE class="xml plain">></code>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<p> ですが、公式ドキュメントには、この方法はブラウザーが解析できない HTML を生成する可能性があるため、推奨されないと記載されています。しかし、試してみましたが、予期せぬ事態は起こりませんでした。</p>
<p>HTML:<br></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="31174" class="copybut" id="copybut31174" onclick="doCopy('code31174')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div>
<div class="codebody" id="code31174"> <br><div id ="コンテナ "> <br></div> <br><label> /label> <br><br>${名前}</label<br /> <br><br> <br> <br> </div>
<br><br>コードをコピーします<div class="codetitle">
<span><a style="CURSOR: pointer" data="12612" class="copybut" id="copybut12612" onclick="doCopy('code12612')"> コードは次のとおりです:<u></u> </a>var users = [{ ID: 'think8848', Name : 'ジョセフ・チャン' } , { ID: 'aCloud', 名前: 'メアリー・チャン'}]; </span>$('#inline').tmpl(users).appendTo('#container'); </div> <div class="codebody" id="code12612">
<br>効果:<br>
<br>
</div>
<p></p>キャッシュ テンプレートのコンパイル<p>。jQuery .tmpl() では、事前にテンプレートをコンパイルしてキャッシュし、適切なタイミングでそれを使用することもできます。これは、一部のデータのネストに非常に役立ちます。例: <img alt="" src="http://files.jb51.net/upload/201107/20110718011318257.jpg">Html</p>
<p><strong></strong><br>コードをコピー<br></p>
<div class="codetitle">
<span> コードは次のとおりです。<a style="CURSOR: pointer" data="94858" class="copybut" id="copybut94858" onclick="doCopy('code94858')"><u> </u><テーブルのセルスペース = "0" cellpadding="1"> </a><tbody id="compileRows"> </span></table> </div> <div class="codebody" id="code94858">JavaScript <br><br><br><br><br>コードをコピー</div>
<br><br> コードは次のとおりです。<div class="codetitle">
<span> <a style="CURSOR: pointer" data="21561" class="copybut" id="copybut21561" onclick="doCopy('code21561')">< script id="compile1" type="text/x-jquery-tmpl"> <u>{{tmpl 'cached'}} </u><tr><td>${ID}</td> <td>${名前}</td></tr> </a></script> </span><script id="compile2" type="type/x-jquery-tmpl"> </div><tr><tdcolspan="2">${グループ}</td></tr> <div class="codebody" id="code21561"></script><br><script type="text/ javascript"> <br>$(function () { <br>var groupUsers = [{ ID: 'think8848', 名前: 'ジョセフ・チャン', グループ: '管理者' }, { ID: 'aCloud', 名前: 'メアリー・チャン'、グループ: 'ユーザー'}]; <br>$('#compile2').template('cached'); <br>$('#compile1').tmpl(groupUsers).appendTo(' #compileRows'); <br></script> <br><br> <br><br>
<br>効果:<br>
<br><br><br>
</div>
<br>$.template() メソッド、 は、HTML の一部をテンプレートにコンパイルします。例: <p>
</p>JavaScript<p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318610.jpg"></p>
<p><strong>コードをコピー</strong></p>
<p> コードは次のとおりです:<br></p>
<div class="codetitle"> <span>var markup = '< ;tr></span><td>${ID}</td>gt;<td>${名前}<a style="CURSOR: pointer" data="41451" class="copybut" id="copybut41451" onclick="doCopy('code41451')">$.template('テンプレート', マークアップ); <u> $.tmpl('template', users).appendTo('#templateRows'); </u></a> このようにして、マークアップで定義したテンプレートを templateRows オブジェクトに適用できます。 jQuery .tmpl() タグ、式、属性: <div class="codebody" id="code41451">${}: 前の例から判断すると、このタグの役割はプレースホルダーに相当することは明らかですが、{ を記述する別の方法もあります。 {= field}} は次のとおりです: <br><br><br><br>
</div> コードをコピーします <br><br><br> コードは次のとおりです: <br><div class="codetitle"> <span>< スクリプト id="myTemplate" type="text/x-jquery-tmpl"> <a style="CURSOR: pointer" data="8339" class="copybut" id="copybut8339" onclick="doCopy('code8339')"><tr><td>{{= ID}}</td><td> = Name} }</td></tr> <u></script> </u></a> </span>「=」記号の後にはスペースが必要であることに注意してください。効果はありません。 </div>さらに、${} に式を入れることもできます。これは次のような素晴らしいものです。<div class="codebody" id="code8339">Html <br><br><br><br>
</div>コードをコピー<br><br> <br> コードは次のとおりです。 <br><div class="codetitle"> <span><table cellpacing="0" cellpadding="3" border="1"> <a style="CURSOR: pointer" data="32602" class="copybut" id="copybut32602" onclick="doCopy('code32602')"><tbody id="expressionRows"> ; <u> </u></a> <br>Javascript <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="8035" class="copybut" id="copybut8035" onclick="doCopy('code8035')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code8035"> <br><script type="text/javascript"> <br>$(function () { <br>var userLangs = [{ ID: 'think8848', Name: 'Joseph Chan', Langs: ['Chinese', 'English'] }, { ID: 'aCloud', Name: 'Mary Cheung', Langs: ['Chinese', 'French']}]; <br>$('#expression').tmpl(userLangs).appendTo('#expressionRows'); <br>}); <br></script> <br>
</div>
<br>
<p>效果：</p>
<p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318944.jpg"></p>
<p>jQuery .tmpl()有两个比较有用的属性:<strong>$item</strong>、<strong>$data</strong>:</p>
<p>$item代表当前的模板；$data代表当前的数据。</p>
<p>Html<br></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="81736" class="copybut" id="copybut81736" onclick="doCopy('code81736')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code81736"> <br><table cellspacing="0" cellpadding="3" border="1"> <br><tbody id="propertyRows"> <br></tbody> <br></table> <br>
</div> <br>Javascript <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="34075" class="copybut" id="copybut34075" onclick="doCopy('code34075')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code34075"> <br><script id="property" type="text/x-jquery-tmpl"> <br><tr><td>${ID}</td><td>${$data.Name}</td><td>${$item.getLangs('; ')}</td></tr> </script> <br><script type="text/javascript"> <br>$(function () { <br>var userLangs = [{ ID: 'think8848', Name: 'Joseph Chan', Langs: ['Chinese', 'English'] }, { ID: 'aCloud', Name: 'Mary Cheung', Langs: ['Chinese', 'French']}]; <br>$('#property').tmpl(userLangs, { <br>getLangs: function (separator) { <br>return this.data.Langs.join(separator); <br>} <br>}) <br>.appendTo('#propertyRows'); <br>}); <br></script> <br>
</div> <br>
<p>效果:</p>
<p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318944.jpg"></p>
<p><strong>{{each}}</strong>这个标签一看就知道是做循环用的了，用法如下：</p>
<p>Html<br></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="77059" class="copybut" id="copybut77059" onclick="doCopy('code77059')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code77059"> <br><ul id="eachList"> <br></ul> <br>
</div> <br>Javascript <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="1222" class="copybut" id="copybut1222" onclick="doCopy('code1222')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code1222"> <br><script id="each" type="text/x-jquery-tmpl"> <br><li>ID: ${ID}; Name: ${Name};<br />Langs:<ul>{{each Langs}}<li>${$index + 1}: <label>${$value}. </label></li>{{/each}}<ul></li> <br></script> <br><script type="text/javascript"> <br>$(function () { <br>var userLangs = [{ ID: 'think8848', Name: 'Joseph Chan', Langs: ['Chinese', 'English'] }, { ID: 'aCloud', Name: 'Mary Cheung', Langs: ['Chinese', 'French']}]; <br>$('#each').tmpl(userLangs).appendTo('#eachList'); <br>}); <br>
</div> <br>
<p>效果:</p>
<p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318740.jpg"></p>
<p>{{each}}还有另一种写法:</p>
<p>Javascript</p>
<div class="cnblogs_Highlighter">
<div class="syntaxhighlighter nogutter jscript" id="highlighter_637562">
<div class="lines">
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain"><script id=</CODE><CODE class="jscript string">"each2"</CODE> <CODE class="jscript plain">type=</CODE><CODE class="jscript string">"text/x-jquery-tmpl"</CODE><CODE class="jscript plain">> </code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain"><li>ID: ${ID}; Name: ${Name};<br />Langs:<ul><STRONG>{{each(i,lang) Langs}}<li>${i + 1}: <label>${lang}. </label></li>{{/each}}</STRONG></ul></li> </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain"></script></code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<p>作用和前一种是一样的。</p>
<p><strong>{{if}}和{{else}}</strong>，这两个标签应该一看就知道作用了，直接上示例:</p>
<p>Javascript</p>
<div class="cnblogs_Highlighter">
<div class="syntaxhighlighter nogutter jscript" id="highlighter_72157">
<div class="lines">
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain"><script id=</CODE><CODE class="jscript string">"ifelse"</CODE> <CODE class="jscript plain">type=</CODE><CODE class="jscript string">"text/x-jquery-tmpl"</CODE><CODE class="jscript plain">> </code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain"><tr><td>${ID}</td><td>${Name}</td><td>{{</code><code class="jscript keyword">if</code> <code class="jscript plain">Langs.length > 1}}${Langs.join(</code><code class="jscript string">'; '</code><code class="jscript plain">)}{{</code><code class="jscript keyword">else</code><code class="jscript plain">}}${Langs}{{/</code><code class="jscript keyword">if</code><code class="jscript plain">}}</td></tr> </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain"></script></code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<p>如果Langs数组元素超过1个，则用'; '连接起来，否则就直接显示Langs，效果:</p>
<p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318581.jpg"></p>
<p><strong>{{html}}</strong>，直接将对象属性值作为HTML代码替换占位符：</p>
<p>Javascript</p>
<div class="cnblogs_Highlighter">
<div class="syntaxhighlighter nogutter jscript" id="highlighter_195084">
<div class="lines">
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain"><script id=</CODE><CODE class="jscript string">"html"</CODE> <CODE class="jscript plain">type=</CODE><CODE class="jscript string">"text/x-jquery-tmpl"</CODE><CODE class="jscript plain">> </code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain"><tr><td>${ID}</td><td>${Name}</td><td>{{html Ctrl}}</td></tr> </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain"></script> </code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain"><script type=</CODE><CODE class="jscript string">"text/javascript"</CODE><CODE class="jscript plain">> </code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain">$(</code><code class="jscript keyword">function</code> <code class="jscript plain">() { </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript keyword">var</code> <code class="jscript plain">ctrls = [{ ID: </code><code class="jscript string">'think8848'</code><code class="jscript plain">, Name: </code><code class="jscript string">'Joseph Chan'</code><code class="jscript plain">, Ctrl: </code><code class="jscript string">'<input type="button" value="Demo" />'</code> <code class="jscript plain">}, { ID: </code><code class="jscript string">'aCloud'</code><code class="jscript plain">, Name: </code><code class="jscript string">'Mary Cheung'</code><code class="jscript plain">, Ctrl: </code><code class="jscript string">'<input type="text" value="Demo" />'</code><code class="jscript plain">}]; </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain">$(</code><code class="jscript string">'#html'</code><code class="jscript plain">).tmpl(ctrls).appendTo(</code><code class="jscript string">'#htmlRows'</code><code class="jscript plain">); </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain">}); </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain"></script></code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<p>效果:</p>
<p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318267.jpg"></p>
<p><strong>{{tmpl}}</strong>，前面已经提过该标签了，这里再给一个使用参数的例子:</p>
<p>Javascript</p>
<div class="cnblogs_Highlighter">
<div class="syntaxhighlighter nogutter jscript" id="highlighter_794520">
<div class="lines">
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain"><script id=</CODE><CODE class="jscript string">"tmpl1"</CODE> <CODE class="jscript plain">type=</CODE><CODE class="jscript string">"text/x-jquery-tmpl"</CODE><CODE class="jscript plain">> </code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain"><tr><td>${ID}</td><td>${Name}</td><td> {{tmpl($data) </code><code class="jscript string">'#tmpl2'</code><code class="jscript plain">}}</td></tr> </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain"></script> </code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain"><script id=</CODE><CODE class="jscript string">"tmpl2"</CODE> <CODE class="jscript plain">type=</CODE><CODE class="jscript string">"type/x-jquery-tmpl"</CODE><CODE class="jscript plain">> </code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain">{{each Langs}}${$value} {{/each}} </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain"></script> </code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain"><script type=</CODE><CODE class="jscript string">"text/javascript"</CODE><CODE class="jscript plain">> </code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain">$(</code><code class="jscript keyword">function</code> <code class="jscript plain">() { </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript keyword">var</code> <code class="jscript plain">userLangs = [{ ID: </code><code class="jscript string">'think8848'</code><code class="jscript plain">, Name: </code><code class="jscript string">'Joseph Chan'</code><code class="jscript plain">, Langs: [</code><code class="jscript string">'Chinese'</code><code class="jscript plain">, </code><code class="jscript string">'English'</code><code class="jscript plain">] }, { ID: </code><code class="jscript string">'aCloud'</code><code class="jscript plain">, Name: </code><code class="jscript string">'Mary Cheung'</code><code class="jscript plain">, Langs: [</code><code class="jscript string">'Chinese'</code><code class="jscript plain">, </code><code class="jscript string">'French'</code><code class="jscript plain">]}]; </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain">$(</code><code class="jscript string">'#tmpl1'</code><code class="jscript plain">).tmpl(userLangs).appendTo(</code><code class="jscript string">'#tmplRows'</code><code class="jscript plain">); </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain">}); </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain"></script></code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<p>效果:</p>
<p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318206.jpg"></p>
<p><strong>{{wrap}}</strong>,包装器，这回不需要指定对哪一个元素使用模板了，直接生成模板的包装器，示例:</p>
<p>Html</p>
<div class="cnblogs_Highlighter">
<div class="syntaxhighlighter nogutter xml" id="highlighter_885800">
<div class="bar ">
<div class="toolbar"> </div>
</div>
<div class="lines">
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content"><code class="xml plain"><</CODE><CODE class="xml keyword">div</CODE> <CODE class="xml color1">id</CODE><CODE class="xml plain">=</CODE><CODE class="xml string">"wrapDemo"</CODE><CODE class="xml plain">> </code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content"><code class="xml plain"></</CODE><CODE class="xml keyword">div</CODE><CODE class="xml plain">></code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<p>Javascript</p>
<div class="cnblogs_Highlighter">
<div class="syntaxhighlighter nogutter jscript" id="highlighter_733077">
<div class="lines">
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain"><script id=</CODE><CODE class="jscript string">"myTmpl"</CODE> <CODE class="jscript plain">type=</CODE><CODE class="jscript string">"text/x-jquery-tmpl"</CODE><CODE class="jscript plain">> </code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain">The following wraps and reorders some HTML content: </code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content">
<code class="jscript plain">{{wrap </code><code class="jscript string">"#tableWrapper"</code><code class="jscript plain">}} </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain"><h3>One</h3> </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain"><div> </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain">First <b>content</b> </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain"></div> </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain"><h3>Two</h3> </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain"><div> </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain">And <em>more</em> <b>content</b>... </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain"></div> </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain">{{/wrap}} </code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain"></script> </code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain"><script id=</CODE><CODE class="jscript string">"tableWrapper"</CODE> <CODE class="jscript plain">type=</CODE><CODE class="jscript string">"text/x-jquery-tmpl"</CODE><CODE class="jscript plain">> </code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain"><table cellspacing=</CODE><CODE class="jscript string">"0"</CODE> <CODE class="jscript plain">cellpadding=</CODE><CODE class="jscript string">"3"</CODE> <CODE class="jscript plain">border=</CODE><CODE class="jscript string">"1"</CODE><CODE class="jscript plain">><tbody> </code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain"><tr> </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain">{{each $item.html(</code><code class="jscript string">"h3"</code><code class="jscript plain">, </code><code class="jscript keyword">true</code><code class="jscript plain">)}} </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain"><td> </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain">${$value} </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain"></td> </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain">{{/each}} </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain"></tr> </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain"><tr> </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain">{{each $item.html(</code><code class="jscript string">"div"</code><code class="jscript plain">)}} </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain"><td> </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain">{{html $value}} </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain"></td> </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain">{{/each}} </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain"></tr> </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain"></tbody></table> </code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain"></script> </code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain"><script type=</CODE><CODE class="jscript string">"text/javascript"</CODE><CODE class="jscript plain">> </code></td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain">$(</code><code class="jscript keyword">function</code> <code class="jscript plain">() { </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain">$(</code><code class="jscript string">'#myTmpl'</code><code class="jscript plain">).tmpl().appendTo(</code><code class="jscript string">'#wrapDemo'</code><code class="jscript plain">); </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain">}); </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain"></script></code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<p>効果:</p>
<p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318409.jpg"></p>
<p><strong>$.tmplItem()</strong> メソッド。このメソッドを使用すると、レンダリングされた要素から $item を取得できます。例: </p>
<div class="cnblogs_Highlighter">
<div class="syntaxhighlighter nogutter jscript" id="highlighter_712614">
<div class="bar ">
<div class="toolbar"> </div>
</div>
<div class="lines">
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content">
<code class="jscript plain">$(</code><code class="jscript string">'tbody'</code><code class="jscript plain">).delegate(</code><code class="jscript string">'tr'</code><code class="jscript plain">, </code><code class="jscript string">'click'</code><code class="jscript plain">, </code><code class="jscript keyword">function</code> <code class="jscript plain">() { </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript keyword">var</code> <code class="jscript plain">item = $.tmplItem(</code><code class="jscript keyword">this</code><code class="jscript plain">); </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt1">
<table>
<tbody>
<tr>
<td class="content">
<code class="spaces"> </code><code class="jscript plain">alert(item.data.Name); </code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="line alt2">
<table>
<tbody>
<tr>
<td class="content"><code class="jscript plain">});</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<p>効果:</p>
<p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318689.jpg"></p>
<p></p>
<p>現時点では、公式 API で紹介されている内容は完成しています。私の電子ライティングのレベルは高くないため、細部がよく理解できていない可能性があります。誤りがある場合は、修正してください。 <br><a href="http://xiazai.jb51.net/201107/yuanma/jqueryimpl.rar" target="_blank">ソースコードのダウンロード </a></p></span>
</div>
</td>
</div>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。