jQuery .tmpl(), .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 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>, 하지만 공식 문서에는 이 방법이 브라우저에서 구문 분석할 수 없는 HTML을 생성할 수 있다고 나와 있으므로 권장하지 않습니다. 하지만 시도해 보았는데 예상치 못한 일이 발생하지 않았습니다. </p> <p>HTML:<br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="31174" class="copybut" id="copybut31174" onclick="doCopy('code31174')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code31174"> <br><div id ="컨테이너"> <br></div> <br><div id="inline" style="display: none"> /label> <br><label> <br>${이름}</label><br /> <br><br> <br>자바스크립트: <br> </div> <br><br><div class="codetitle">코드 복사<span><a style="CURSOR: pointer" data="12612" class="copybut" id="copybut12612" onclick="doCopy('code12612')"><u> 코드는 다음과 같습니다.</u></a> </span>var users = [{ ID: 'think8848', Name : '조셉 찬' } , { ID: 'aCloud', 이름: 'Mary Cheung'}] </div>$('#inline').tmpl(users).appendTo('#container') <div class="codebody" id="code12612"> <br> <br> <br>효과:</div> <p></p> <p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318257.jpg">캐시 템플릿 컴파일</p>. jQuery .tmpl()에서는 템플릿을 미리 컴파일하고 캐시한 다음 적절한 시점에 사용할 수도 있습니다. 이는 일부 데이터 중첩에 매우 유용합니다. 예: <p>Html<strong></strong><br><br></p> <div class="codetitle">코드 복사<span><a style="CURSOR: pointer" data="94858" class="copybut" id="copybut94858" onclick="doCopy('code94858')"><u> 코드는 다음과 같습니다.</u></a> </span>< tablecellpadding="3" border="1"> </div><tbody id="compileRows"> <div class="codebody" id="code94858"></tbody> <br> <br>Javascript <br><br><br> </div> <br>코드 복사<br><div class="codetitle"> <span> 코드는 다음과 같습니다.<a style="CURSOR: pointer" data="21561" class="copybut" id="copybut21561" onclick="doCopy('code21561')"><u> </u>< script id="compile1" type="text/x-jquery-tmpl"> </a>{{tmpl '캐시됨'}} </span><tr><td>${ID}</td> <td>${ 이름}</td></tr> </div></script> <div class="codebody" id="code21561"><script id="compile2" type="type/x-jquery-tmpl"> <br><tr><td colspan="2">${그룹}</td></tr> <br></script> <br><script type="text/ javascript"> <br>$(function () { <br>var groupUsers = [{ ID: 'think8848', 이름: 'Joseph Chan', 그룹: 'Administrators' }, { ID: 'aCloud', 이름: 'Mary Cheung', 그룹: '사용자'}] <br>$('#compile2').template('cached') <br>$('#compile1').tmpl(groupUsers).appendTo(' #compileRows'); <br></script> <br><br> <br>효과:<br> <br><br><br> </div> <br>$.template() 메서드, 는 HTML 조각을 템플릿으로 컴파일합니다. 예: <p> </p>Javascript<p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318610.jpg"></p> <p><strong>코드 복사</strong></p> <p> 코드는 다음과 같습니다.<br></p> <div class="codetitle"> <span>var markup = '< ;tr><td>${ID}</td><td>${이름}</td></tr>' <a style="CURSOR: pointer" data="41451" class="copybut" id="copybut41451" onclick="doCopy('code41451')">$.template('template', markup); <u> $.tmpl('template', users).appendTo('#templateRows'); </u></a> </span>이런 방식으로 마크업에 정의된 템플릿을 templateRows 객체에 적용할 수 있습니다. </div>jQuery .tmpl() 태그, 표현식, 속성: <div class="codebody" id="code41451">${}: 이전 예에서 판단해 보면 이 태그의 역할은 자리표시자와 동일하여 명백하지만 {를 작성하는 또 다른 방법도 있습니다. {= field}}는 다음과 같습니다. <br><br><br><br> </div> 코드를 복사합니다. <br><br><br> 코드는 다음과 같습니다. <br><div class="codetitle"> <span>< script id="myTemplate" type="text/x-jquery-tmpl"> <a style="CURSOR: pointer" data="8339" class="copybut" id="copybut8339" onclick="doCopy('code8339')"><tr><td>{{= ID}}</td><td>{{ = 이름} }</td></tr> <u></script> </u></a> </span>"=" 기호 뒤에는 공백이 와야 합니다. 그렇지 않으면 아무런 효과가 없습니다. </div>또한 다음과 같이 ${}에 표현식을 넣을 수도 있습니다. <div class="codebody" id="code8339">Html <br><br><br><br> </div>코드 복사<br><br> <br> 코드는 다음과 같습니다. <br><div class="codetitle"> <span><table cellpacing="0" cellpadding="3" border="1"> <a style="CURSOR: pointer" data="32602" class="copybut" id="copybut32602" onclick="doCopy('code32602')"><tbody id="expressionRows"> ; <u> </tbody> </u></테이블> <br>Javascript <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="8035" class="copybut" id="copybut8035" onclick="doCopy('code8035')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code8035"> <br><script type="text/javascript"> <br>$(function () { <br>var userLangs = [{ ID: 'think8848', Name: 'Joseph Chan', Langs: ['Chinese', 'English'] }, { ID: 'aCloud', Name: 'Mary Cheung', Langs: ['Chinese', 'French']}]; <br>$('#expression').tmpl(userLangs).appendTo('#expressionRows'); <br>}); <br></script> <br> </div> <br> <p>效果：</p> <p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318944.jpg"></p> <p>jQuery .tmpl()有两个比较有用的属性:<strong>$item</strong>、<strong>$data</strong>:</p> <p>$item代表当前的模板；$data代表当前的数据。</p> <p>Html<br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="81736" class="copybut" id="copybut81736" onclick="doCopy('code81736')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code81736"> <br><table cellspacing="0" cellpadding="3" border="1"> <br><tbody id="propertyRows"> <br></tbody> <br></table> <br> </div> <br>Javascript <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="34075" class="copybut" id="copybut34075" onclick="doCopy('code34075')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code34075"> <br><script id="property" type="text/x-jquery-tmpl"> <br><tr><td>${ID}</td><td>${$data.Name}</td><td>${$item.getLangs('; ')}</td></tr> </script> <br><script type="text/javascript"> <br>$(function () { <br>var userLangs = [{ ID: 'think8848', Name: 'Joseph Chan', Langs: ['Chinese', 'English'] }, { ID: 'aCloud', Name: 'Mary Cheung', Langs: ['Chinese', 'French']}]; <br>$('#property').tmpl(userLangs, { <br>getLangs: function (separator) { <br>return this.data.Langs.join(separator); <br>} <br>}) <br>.appendTo('#propertyRows'); <br>}); <br></script> <br> </div> <br> <p>效果:</p> <p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318944.jpg"></p> <p><strong>{{each}}</strong>这个标签一看就知道是做循环用的了，用法如下：</p> <p>Html<br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="77059" class="copybut" id="copybut77059" onclick="doCopy('code77059')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code77059"> <br><ul id="eachList"> <br></ul> <br> </div> <br>Javascript <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="1222" class="copybut" id="copybut1222" onclick="doCopy('code1222')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code1222"> <br><script id="each" type="text/x-jquery-tmpl"> <br><li>ID: ${ID}; Name: ${Name};<br />Langs:<ul>{{each Langs}}<li>${$index + 1}: <label>${$value}. </label></li>{{/each}}<ul></li> <br></script> <br><script type="text/javascript"> <br>$(function () { <br>var userLangs = [{ ID: 'think8848', Name: 'Joseph Chan', Langs: ['Chinese', 'English'] }, { ID: 'aCloud', Name: 'Mary Cheung', Langs: ['Chinese', 'French']}]; <br>$('#each').tmpl(userLangs).appendTo('#eachList'); <br>}); <br> </div> <br> <p>效果:</p> <p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318740.jpg"></p> <p>{{each}}还有另一种写法:</p> <p>Javascript</p> <div class="cnblogs_Highlighter"> <div class="syntaxhighlighter nogutter jscript" id="highlighter_637562"> <div class="lines"> <div class="line alt1"> <table> <tbody> <tr> <td class="content"><code class="jscript plain"><script id=</CODE><CODE class="jscript string">"each2"</CODE> <CODE class="jscript plain">type=</CODE><CODE class="jscript string">"text/x-jquery-tmpl"</CODE><CODE class="jscript plain">> </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain"><li>ID: ${ID}; Name: ${Name};<br />Langs:<ul><STRONG>{{each(i,lang) Langs}}<li>${i + 1}: <label>${lang}. </label></li>{{/each}}</STRONG></ul></li> </code> </td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"><code class="jscript plain"></script></code></td> </tr> </tbody> </table> </div> </div> </div> </div> <p>作用和前一种是一样的。</p> <p><strong>{{if}}和{{else}}</strong>，这两个标签应该一看就知道作用了，直接上示例:</p> <p>Javascript</p> <div class="cnblogs_Highlighter"> <div class="syntaxhighlighter nogutter jscript" id="highlighter_72157"> <div class="lines"> <div class="line alt1"> <table> <tbody> <tr> <td class="content"><code class="jscript plain"><script id=</CODE><CODE class="jscript string">"ifelse"</CODE> <CODE class="jscript plain">type=</CODE><CODE class="jscript string">"text/x-jquery-tmpl"</CODE><CODE class="jscript plain">> </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain"><tr><td>${ID}</td><td>${Name}</td><td>{{</code><code class="jscript keyword">if</code> <code class="jscript plain">Langs.length > 1}}${Langs.join(</code><code class="jscript string">'; '</code><code class="jscript plain">)}{{</code><code class="jscript keyword">else</code><code class="jscript plain">}}${Langs}{{/</code><code class="jscript keyword">if</code><code class="jscript plain">}}</td></tr> </code> </td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"><code class="jscript plain"></script></code></td> </tr> </tbody> </table> </div> </div> </div> </div> <p>如果Langs数组元素超过1个，则用'; '连接起来，否则就直接显示Langs，效果:</p> <p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318581.jpg"></p> <p><strong>{{html}}</strong>，直接将对象属性值作为HTML代码替换占位符：</p> <p>Javascript</p> <div class="cnblogs_Highlighter"> <div class="syntaxhighlighter nogutter jscript" id="highlighter_195084"> <div class="lines"> <div class="line alt1"> <table> <tbody> <tr> <td class="content"><code class="jscript plain"><script id=</CODE><CODE class="jscript string">"html"</CODE> <CODE class="jscript plain">type=</CODE><CODE class="jscript string">"text/x-jquery-tmpl"</CODE><CODE class="jscript plain">> </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain"><tr><td>${ID}</td><td>${Name}</td><td>{{html Ctrl}}</td></tr> </code> </td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"><code class="jscript plain"></script> </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"><code class="jscript plain"><script type=</CODE><CODE class="jscript string">"text/javascript"</CODE><CODE class="jscript plain">> </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain">$(</code><code class="jscript keyword">function</code> <code class="jscript plain">() { </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript keyword">var</code> <code class="jscript plain">ctrls = [{ ID: </code><code class="jscript string">'think8848'</code><code class="jscript plain">, Name: </code><code class="jscript string">'Joseph Chan'</code><code class="jscript plain">, Ctrl: </code><code class="jscript string">'<input type="button" value="Demo" />'</code> <code class="jscript plain">}, { ID: </code><code class="jscript string">'aCloud'</code><code class="jscript plain">, Name: </code><code class="jscript string">'Mary Cheung'</code><code class="jscript plain">, Ctrl: </code><code class="jscript string">'<input type="text" value="Demo" />'</code><code class="jscript plain">}]; </code> </td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain">$(</code><code class="jscript string">'#html'</code><code class="jscript plain">).tmpl(ctrls).appendTo(</code><code class="jscript string">'#htmlRows'</code><code class="jscript plain">); </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain">}); </code> </td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"><code class="jscript plain"></script></code></td> </tr> </tbody> </table> </div> </div> </div> </div> <p>效果:</p> <p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318267.jpg"></p> <p><strong>{{tmpl}}</strong>，前面已经提过该标签了，这里再给一个使用参数的例子:</p> <p>Javascript</p> <div class="cnblogs_Highlighter"> <div class="syntaxhighlighter nogutter jscript" id="highlighter_794520"> <div class="lines"> <div class="line alt1"> <table> <tbody> <tr> <td class="content"><code class="jscript plain"><script id=</CODE><CODE class="jscript string">"tmpl1"</CODE> <CODE class="jscript plain">type=</CODE><CODE class="jscript string">"text/x-jquery-tmpl"</CODE><CODE class="jscript plain">> </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain"><tr><td>${ID}</td><td>${Name}</td><td> {{tmpl($data) </code><code class="jscript string">'#tmpl2'</code><code class="jscript plain">}}</td></tr> </code> </td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"><code class="jscript plain"></script> </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"><code class="jscript plain"><script id=</CODE><CODE class="jscript string">"tmpl2"</CODE> <CODE class="jscript plain">type=</CODE><CODE class="jscript string">"type/x-jquery-tmpl"</CODE><CODE class="jscript plain">> </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain">{{each Langs}}${$value} {{/each}} </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"><code class="jscript plain"></script> </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"><code class="jscript plain"><script type=</CODE><CODE class="jscript string">"text/javascript"</CODE><CODE class="jscript plain">> </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain">$(</code><code class="jscript keyword">function</code> <code class="jscript plain">() { </code> </td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript keyword">var</code> <code class="jscript plain">userLangs = [{ ID: </code><code class="jscript string">'think8848'</code><code class="jscript plain">, Name: </code><code class="jscript string">'Joseph Chan'</code><code class="jscript plain">, Langs: [</code><code class="jscript string">'Chinese'</code><code class="jscript plain">, </code><code class="jscript string">'English'</code><code class="jscript plain">] }, { ID: </code><code class="jscript string">'aCloud'</code><code class="jscript plain">, Name: </code><code class="jscript string">'Mary Cheung'</code><code class="jscript plain">, Langs: [</code><code class="jscript string">'Chinese'</code><code class="jscript plain">, </code><code class="jscript string">'French'</code><code class="jscript plain">]}]; </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain">$(</code><code class="jscript string">'#tmpl1'</code><code class="jscript plain">).tmpl(userLangs).appendTo(</code><code class="jscript string">'#tmplRows'</code><code class="jscript plain">); </code> </td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain">}); </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"><code class="jscript plain"></script></code></td> </tr> </tbody> </table> </div> </div> </div> </div> <p>效果:</p> <p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318206.jpg"></p> <p><strong>{{wrap}}</strong>,包装器，这回不需要指定对哪一个元素使用模板了，直接生成模板的包装器，示例:</p> <p>Html</p> <div class="cnblogs_Highlighter"> <div class="syntaxhighlighter nogutter xml" id="highlighter_885800"> <div class="bar "> <div class="toolbar"> </div> </div> <div class="lines"> <div class="line alt1"> <table> <tbody> <tr> <td class="content"><code class="xml plain"><</CODE><CODE class="xml keyword">div</CODE> <CODE class="xml color1">id</CODE><CODE class="xml plain">=</CODE><CODE class="xml string">"wrapDemo"</CODE><CODE class="xml plain">> </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"><code class="xml plain"></</CODE><CODE class="xml keyword">div</CODE><CODE class="xml plain">></code></td> </tr> </tbody> </table> </div> </div> </div> </div> <p>Javascript</p> <div class="cnblogs_Highlighter"> <div class="syntaxhighlighter nogutter jscript" id="highlighter_733077"> <div class="lines"> <div class="line alt1"> <table> <tbody> <tr> <td class="content"><code class="jscript plain"><script id=</CODE><CODE class="jscript string">"myTmpl"</CODE> <CODE class="jscript plain">type=</CODE><CODE class="jscript string">"text/x-jquery-tmpl"</CODE><CODE class="jscript plain">> </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"><code class="jscript plain">The following wraps and reorders some HTML content: </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"> <code class="jscript plain">{{wrap </code><code class="jscript string">"#tableWrapper"</code><code class="jscript plain">}} </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain"><h3>One</h3> </code> </td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain"><div> </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain">First <b>content</b> </code> </td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain"></div> </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain"><h3>Two</h3> </code> </td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain"><div> </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain">And <em>more</em> <b>content</b>... </code> </td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain"></div> </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"><code class="jscript plain">{{/wrap}} </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"><code class="jscript plain"></script> </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"><code class="jscript plain"><script id=</CODE><CODE class="jscript string">"tableWrapper"</CODE> <CODE class="jscript plain">type=</CODE><CODE class="jscript string">"text/x-jquery-tmpl"</CODE><CODE class="jscript plain">> </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"><code class="jscript plain"><table cellspacing=</CODE><CODE class="jscript string">"0"</CODE> <CODE class="jscript plain">cellpadding=</CODE><CODE class="jscript string">"3"</CODE> <CODE class="jscript plain">border=</CODE><CODE class="jscript string">"1"</CODE><CODE class="jscript plain">><tbody> </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain"><tr> </code> </td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain">{{each $item.html(</code><code class="jscript string">"h3"</code><code class="jscript plain">, </code><code class="jscript keyword">true</code><code class="jscript plain">)}} </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain"><td> </code> </td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain">${$value} </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain"></td> </code> </td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain">{{/each}} </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain"></tr> </code> </td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain"><tr> </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain">{{each $item.html(</code><code class="jscript string">"div"</code><code class="jscript plain">)}} </code> </td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain"><td> </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain">{{html $value}} </code> </td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain"></td> </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain">{{/each}} </code> </td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain"></tr> </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"><code class="jscript plain"></tbody></table> </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"><code class="jscript plain"></script> </code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"><code class="jscript plain"><script type=</CODE><CODE class="jscript string">"text/javascript"</CODE><CODE class="jscript plain">> </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain">$(</code><code class="jscript keyword">function</code> <code class="jscript plain">() { </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain">$(</code><code class="jscript string">'#myTmpl'</code><code class="jscript plain">).tmpl().appendTo(</code><code class="jscript string">'#wrapDemo'</code><code class="jscript plain">); </code> </td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain">}); </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"><code class="jscript plain"></script></code></td> </tr> </tbody> </table> </div> </div> </div> </div> <p>효과:</p> <p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318409.jpg"></p> <p><strong>$.tmplItem()</strong> 메서드, 이 메서드를 사용하면 렌더링된 요소에서 $item을 가져올 수 있습니다. 예: </p> <div class="cnblogs_Highlighter"> <div class="syntaxhighlighter nogutter jscript" id="highlighter_712614"> <div class="bar "> <div class="toolbar"> </div> </div> <div class="lines"> <div class="line alt1"> <table> <tbody> <tr> <td class="content"> <code class="jscript plain">$(</code><code class="jscript string">'tbody'</code><code class="jscript plain">).delegate(</code><code class="jscript string">'tr'</code><code class="jscript plain">, </code><code class="jscript string">'click'</code><code class="jscript plain">, </code><code class="jscript keyword">function</code> <code class="jscript plain">() { </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript keyword">var</code> <code class="jscript plain">item = $.tmplItem(</code><code class="jscript keyword">this</code><code class="jscript plain">); </code> </td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="content"> <code class="spaces"> </code><code class="jscript plain">alert(item.data.Name); </code> </td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="content"><code class="jscript plain">});</code></td> </tr> </tbody> </table> </div> </div> </div> </div> <p>효과:</p> <p><img alt="" src="http://files.jb51.net/upload/201107/20110718011318689.jpg"></p> <p></p> <p>이 시점에서 공식 API에 소개된 내용은 완성되었습니다. 제 E-writing 수준이 높지 않아, 필연적으로 일부 내용을 잘 이해하지 못하는 부분이 있으면 정정해 주시기 바랍니다. <br><a href="http://xiazai.jb51.net/201107/yuanma/jqueryimpl.rar" target="_blank">소스코드 다운로드 </a></p></a></span> </div>

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

jQuery .tmpl(), .template() 학습자료 요약_jquery