jQuery .tmpl(), .template() 학습자료 요약_jquery
- WBOY원래의
- 2016-05-16 18:04:371289검색
<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"><!-- markup --></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>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.