Home >Web Front-end >JS Tutorial >Summary of jQuery .tmpl(), .template() learning materials_jquery

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

WBOYOriginal: 2016-05-16 18:04:371313browse

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Working principle and optimization analysis of jQuery selector_jqueryNext article：Working principle and optimization analysis of jQuery selector_jquery

See more

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

Related articles