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

Home

Web Front-end

JS Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:04 PM

template

<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 src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110718011317244.jpg" class="lazy" alt=""></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 src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110718011318907.jpg" class="lazy" alt=""></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 src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110718011318257.jpg" class="lazy" alt=""></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 src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110718011318610.jpg" class="lazy" alt=""></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 src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110718011318944.jpg" class="lazy" alt=""></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 src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110718011318944.jpg" class="lazy" alt=""></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 src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110718011318740.jpg" class="lazy" alt=""></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 src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110718011318581.jpg" class="lazy" alt=""></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 src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110718011318267.jpg" class="lazy" alt=""></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 src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110718011318206.jpg" class="lazy" alt=""></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 src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110718011318409.jpg" class="lazy" alt=""></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 src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110718011318689.jpg" class="lazy" alt=""></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 of this Website

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

1 months ago By DDD

Where to find the Crane Control Keycard in Atomfall

3 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7642

CakePHP Tutorial

1392

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

150

Related knowledge

Data visualization through Golang's Template package Jul 17, 2023 am 09:01 AM

Data visualization through Golang's Template package. With the advent of the big data era, data visualization has become one of the important means of information processing and analysis. Data visualization can present data in a concise and intuitive way, helping people better understand and analyze data. In Golang, we can use the Template package to implement data visualization functions. This article will introduce how to use Golang's Template package to achieve data visualization and provide code examples. GolangTem

Golang and the Template package: creating personalized user interfaces Jul 18, 2023 am 10:27 AM

Golang and Template package: Create personalized user interface In modern software development, the user interface is often the most direct way for users to interact with the software. In order to provide a user interface that is easy to use and beautiful, developers need flexible tools to create and customize the user interface. In Golang, developers can use the Template package to achieve this goal. This article will introduce the basic usage of Golang and Template packages, and show how to create a personalized user interface through code examples.

How to solve 'undefined: template.Must' error in golang? Jun 24, 2023 pm 09:00 PM

Go language is an increasingly popular programming language with its concise syntax, efficient performance, and easy development. The Go language provides a powerful template engine - "text/template", but when using it, some people may encounter the "undefined:template.Must" error. The following is a method to solve this error. Import the correct package. When using the "text/template" template engine, you need to import "text/template

Golang and the Template package: building a powerful front-end development toolbox Jul 19, 2023 pm 02:43 PM

Golang and the Template package: Building a powerful front-end development toolbox In today's software development, front-end development is becoming more and more important throughout the project. In order to provide an elegant and reliable front-end development solution, we can use the Golang language and its built-in Template package. This article will introduce how to use Golang and the Template package to build a powerful front-end development toolbox. 1. Golang: Efficient and easy-to-use programming language Golang is a modern

Golang's Template package: developing high-performance web applications Jul 17, 2023 pm 05:29 PM

Golang's Template package: developing high-performance web applications Introduction: In web development, the template engine is a very important component. It allows developers to combine dynamic data with static HTML templates to generate final web content. Golang's Template package provides an efficient and powerful way to work with templates. This article will introduce the basic usage of Golang's Template package, and show how to use it to develop high-performance web applications through some code examples.

Build a modern website using Golang's Template package Jul 19, 2023 am 09:22 AM

Use Golang's Template package to build modern websites. In recent years, with the rapid development of the Internet, more and more websites need to provide personalized content and interfaces. At the same time, Golang (also known as Go language) has become a popular choice for developing web applications due to its high performance and powerful concurrency capabilities. Golang's standard library provides a set of powerful and flexible template engines, namely the Template package. This article will introduce how to use Golang's Template package to build modern

How to use opsForValue of RedisTemplate Jun 03, 2023 am 08:55 AM

Use of the opsForValue() method in Redis 1. set(Kkey, Vvalue) adds a string type value, key is the key, and value is the value. redisTemplate.opsForValue().set("stringValue","bbb"); 2. get(Objectkey) gets the value corresponding to the key key. StringstringValue=redisTemplate.opsForValue().get("key")3. append(Kkey,St

Golang and Template package: quickly develop a convenient front-end interface Jul 17, 2023 pm 08:57 PM

Golang and Template package: quickly develop convenient front-end interface In modern Web development, the development of front-end interface is an important and indispensable link. The design of the front-end interface not only needs to be beautiful, but also needs to have a good user experience. However, the traditional front-end development process often requires a lot of time and effort. Fortunately, Golang provides the Template package, which is designed to help developers quickly build convenient front-end interfaces. Golang is an efficient, concise, concurrent, statically typed

See all articles