Summary of jQuery .tmpl(), .template() learning materials

<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"></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>, but the official documentation says that this method may produce HTML that the browser cannot parse, so it is not recommended. However, I tried it and nothing unexpected happened: </p> <p>HTML:<br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="31174" class="copybut" id="copybut31174" onclick="doCopy('code31174')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code31174"> <br><div id="container "> <br></div> <br><div id="inline" style="display: none"> <br><label> <br>${ID}</label> <br><label> <br>${Name}</label><br /> <br></div> <br> </div> <br>Javascript: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="12612" class="copybut" id="copybut12612" onclick="doCopy('code12612')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code12612"> <br>var users = [{ ID: 'think8848', Name: 'Joseph Chan' } , { ID: 'aCloud', Name: 'Mary Cheung'}]; <br>$('#inline').tmpl(users).appendTo('#container'); <br> </div> <p>Effect:</p> <p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318257.jpg"></p> <p><strong>Compile cache template</strong>. In jQuery .tmpl(), you can also compile and cache the template in advance, and then use it at the appropriate time. This is very useful for some data nesting. , such as: <br>Html<br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="94858" class="copybut" id="copybut94858" onclick="doCopy('code94858')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code94858"> <br><table cellspacing= "0" cellpadding="3" border="1"> <br><tbody id="compileRows"> <br></tbody> <br></table> <br> </div> <br>Javascript <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="21561" class="copybut" id="copybut21561" onclick="doCopy('code21561')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code21561"> <br><script id="compile1" type="text/x-jquery-tmpl"> <br>{{tmpl 'cached'}} <br><tr><td>${ID}</td><td>${ Name}</td></tr> <br></script> <br><script id="compile2" type="type/x-jquery-tmpl"> <br><tr> ;<td colspan="2">${Group}</td></tr> <br></script> <br><script type="text/javascript"> <br>$(function () { <br>var groupUsers = [{ ID: 'think8848', Name: 'Joseph Chan', Group: 'Administrators' }, { ID: 'aCloud', Name: 'Mary Cheung', Group : 'Users'}]; <br>$('#compile2').template('cached'); <br>$('#compile1').tmpl(groupUsers).appendTo('#compileRows'); <br>}); <br></script> <br> </div> <br> <p>Effect:</p> <p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318610.jpg"></p> <p><strong>$.template() method, </strong> compiles a piece of Html into a template, example: </p> <p>Javascript<br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="41451" class="copybut" id="copybut41451" onclick="doCopy('code41451')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code41451"> <br>var markup = '<tr> <td>${ID}</td><td>${Name}</td></tr>'; <br>$.template('template', markup); <br> $.tmpl('template', users).appendTo('#templateRows'); <br> </div> <br>In this way, the template defined in markup can be applied to the templateRows object. <br>jQuery .tmpl() tags, expressions, attributes: <br>${}: Judging from the previous example, the role of this tag is obvious, equivalent to a placeholder, but it also has another A way to write {{= field}} is as follows: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="8339" class="copybut" id="copybut8339" onclick="doCopy('code8339')"><u> Copy the code </u></a></span> The code is as follows: </div> <div class="codebody" id="code8339"> <br>< script id="myTemplate" type="text/x-jquery-tmpl"> <br><tr><td>{{= ID}}</td><td>{{= Name} }</td></tr> <br></script> <br> </div> <br>It must be noted that the "=" sign must be followed by a space, otherwise it will have no effect. <br>In addition, you can also put expressions in ${}, which is awesome, such as: <br>Html <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="32602" class="copybut" id="copybut32602" onclick="doCopy('code32602')"><u>Copy code</u></a></span> The code is as follows: </div> <div class="codebody" id="code32602"> <br><table cellspacing="0" cellpadding="3" border="1"> <br><tbody id="expressionRows"> <br> </tbody> <br></table> <br> </div> <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>Effect:</p> <p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318409.jpg"></p> <p><strong>$.tmplItem()</strong> method, using this method, you can get $item from the rendered element, example: </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>Effect:</p> <p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318689.jpg"></p> <p></p> <p>At this point, the content introduced in the official API is complete. My E-writing level is not high, and I will inevitably not understand some details well. If there are any fallacies, please correct me, thank you. <br><a href="http://xiazai.jb51.net/201107/yuanma/jqueryimpl.rar" target="_blank">Source code download </a></p>

Summary of jQuery .tmpl(), .template() learning materials_jquery