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

집

웹 프론트엔드

JS 튜토리얼

jQuery .tmpl(), .template() 학습자료 요약_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>, 하지만 공식 문서에는 이 방법이 브라우저에서 구문 분석할 수 없는 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 src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110718011318257.jpg" class="lazy" alt="">캐시 템플릿 컴파일</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 src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110718011318610.jpg" class="lazy" alt=""></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 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>효과:</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> 메서드, 이 메서드를 사용하면 렌더링된 요소에서 $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 src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201107/20110718011318689.jpg" class="lazy" alt=""></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>

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7530

Cakephp 튜토리얼

1378

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

Golang의 템플릿 패키지를 통한 데이터 시각화 Jul 17, 2023 am 09:01 AM

Golang의 템플릿 패키지를 통한 데이터 시각화 빅데이터 시대의 도래와 함께 데이터 시각화는 정보 처리 및 분석의 중요한 수단 중 하나가 되었습니다. 데이터 시각화는 데이터를 간결하고 직관적인 방식으로 제시하여 사람들이 데이터를 더 잘 이해하고 분석하도록 돕습니다. Golang에서는 템플릿 패키지를 사용하여 데이터 시각화 기능을 구현할 수 있습니다. 이 기사에서는 Golang의 템플릿 패키지를 사용하여 데이터 시각화를 구현하고 코드 예제를 제공하는 방법을 소개합니다. 골랑템

Golang 및 템플릿 패키지: 개인화된 사용자 인터페이스 만들기 Jul 18, 2023 am 10:27 AM

Golang 및 템플릿 패키지: 개인화된 사용자 인터페이스 만들기 현대 소프트웨어 개발에서 사용자 인터페이스는 사용자가 소프트웨어와 상호 작용하는 가장 직접적인 방법인 경우가 많습니다. 사용하기 쉽고 아름다운 사용자 인터페이스를 제공하기 위해 개발자는 사용자 인터페이스를 만들고 사용자 정의할 수 있는 유연한 도구가 필요합니다. Golang에서 개발자는 템플릿 패키지를 사용하여 이 목표를 달성할 수 있습니다. 이 기사에서는 Golang 및 템플릿 패키지의 기본 사용법을 소개하고 코드 예제를 통해 개인화된 사용자 인터페이스를 만드는 방법을 보여줍니다.

golang에서 '정의되지 않음: template.Must' 오류를 해결하는 방법은 무엇입니까? Jun 24, 2023 pm 09:00 PM

Go 언어는 간결한 구문, 효율적인 성능 및 손쉬운 개발을 통해 점점 더 인기를 얻고 있는 프로그래밍 언어입니다. Go 언어는 "text/template"이라는 강력한 템플릿 엔진을 제공하지만, 이를 사용할 때 "undefine:template.Must" 오류가 발생할 수 있습니다. 다음은 이 오류를 해결하는 방법입니다. 올바른 패키지를 가져오십시오. "텍스트/템플릿" 템플릿 엔진을 사용하는 경우 "텍스트/템플릿"을 가져와야 합니다.

Golang 및 템플릿 패키지: 강력한 프런트 엔드 개발 도구 상자 구축 Jul 19, 2023 pm 02:43 PM

Golang 및 템플릿 패키지: 강력한 프런트엔드 개발 도구 상자 구축 오늘날의 소프트웨어 개발에서 프런트엔드 개발은 프로젝트 전반에 걸쳐 점점 더 중요해지고 있습니다. 우아하고 안정적인 프런트 엔드 개발 솔루션을 제공하기 위해 Golang 언어와 내장 템플릿 패키지를 사용할 수 있습니다. 이 기사에서는 Golang과 템플릿 패키지를 사용하여 강력한 프런트 엔드 개발 도구 상자를 구축하는 방법을 소개합니다. 1. Golang: 효율적이고 사용하기 쉬운 프로그래밍 언어 Golang은 현대적인 언어입니다.

Golang의 템플릿 패키지를 사용하여 현대적인 웹사이트 구축 Jul 19, 2023 am 09:22 AM

Golang의 템플릿 패키지를 사용하여 현대적인 웹사이트를 구축하세요. 최근 인터넷의 급속한 발전으로 인해 점점 더 많은 웹사이트에서 개인화된 콘텐츠와 인터페이스를 제공해야 합니다. 동시에 Golang(Go 언어라고도 함)은 고성능과 강력한 동시성 기능으로 인해 웹 애플리케이션 개발에 널리 사용됩니다. Golang의 표준 라이브러리는 강력하고 유연한 템플릿 엔진 세트, 즉 템플릿 패키지를 제공합니다. 이 기사에서는 Golang의 템플릿 패키지를 사용하여 최신 빌드를 만드는 방법을 소개합니다.

Golang 및 템플릿 패키지: 편리한 프런트엔드 인터페이스를 빠르게 개발 Jul 17, 2023 pm 08:57 PM

Golang 및 템플릿 패키지: 편리한 프런트엔드 인터페이스를 신속하게 개발 현대 웹 개발에서 프런트엔드 인터페이스 개발은 중요하고 필수적인 링크입니다. 프런트엔드 인터페이스의 디자인은 아름다워야 할 뿐만 아니라 사용자 경험도 좋아야 합니다. 그러나 전통적인 프런트엔드 개발 프로세스에는 많은 시간과 노력이 필요한 경우가 많습니다. 다행스럽게도 Golang은 개발자가 편리한 프런트엔드 인터페이스를 빠르게 구축할 수 있도록 설계된 템플릿 패키지를 제공합니다. Golang은 효율적이고 간결하며 동시적이고 정적인 유형의 언어입니다.

Golang의 템플릿 패키지: 고성능 웹 애플리케이션 개발 Jul 17, 2023 pm 05:29 PM

Golang의 템플릿 패키지: 고성능 웹 애플리케이션 개발 소개: 웹 개발에서 템플릿 엔진은 매우 중요한 구성 요소입니다. 이를 통해 개발자는 동적 데이터를 정적 HTML 템플릿과 결합하여 최종 웹 콘텐츠를 생성할 수 있습니다. Golang의 템플릿 패키지는 템플릿을 처리하는 효율적이고 강력한 방법을 제공합니다. 이 기사에서는 Golang의 템플릿 패키지의 기본 사용법을 소개하고 이를 사용하여 몇 가지 코드 예제를 통해 고성능 웹 애플리케이션을 개발하는 방법을 보여줍니다.

RedisTemplate의 opsForValue를 사용하는 방법 Jun 03, 2023 am 08:55 AM

Redis에서 opsForValue() 메소드 사용 1. set(Kkey, Vvalue)는 문자열 유형 값을 추가하며, key는 키, value는 값입니다. redisTemplate.opsForValue().set("stringValue","bbb"); 2. get(Objectkey)는 키 키에 해당하는 값을 가져옵니다. StringstringValue=redisTemplate.opsForValue().get("key")3.append(Kkey,St)

See all articles