jquery.tmpl使用

前端模板的使用减少了拼接html的痛苦、减少dom操作的异常、减少各浏览器下dom操作的延迟差异。

下载地址

GitHub：https://github.com/BorisMoore/jquery-tmpl

使用步骤：

1. 引入jquery-tmpl.js
2. 定义模板
3. 将数据与模板合并，并渲染进指定位置

可以使用template()创建myTemplate的命名模板，也可以用var  myTemplate=document.getElementById(“#tpl”)。

$.tmpl( myTemplate, myData ).appendTo( "#div_demo" ); 

直接通过模板id进行操作

$("#tpl").tmpl(myData).appendTo('#div_demo');

例子：

var movies = [
		{ Name: "The Red Violin", ReleaseYear: "1998" },
		{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
		{ Name: "The Inheritance", ReleaseYear: "1976" }
	];
    
      var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";

	  // template函数定义模板，创建命名模板，用于下面的合成
	  $.template( "movieTemplate", markup );

	  // 渲染带有电影数据的模板并插入在“movieList”元素下呈现的HTML
	  $.tmpl( "movieTemplate", movies )
		  .appendTo( "#movieList" );// template函数定义模板，创建命名模板，用于下面的合成
	  $.template( "movieTemplate", markup );

	  // 渲染带有电影数据的模板并插入在“movieList”元素下呈现的HTML
	  $.tmpl( "movieTemplate", movies )
		  .appendTo( "#movieList" );

常用标签：

${},{{each}},{{if}},{{else}},{{html}}.

不常用标签：

{{= }},  {{tmpl}},  {{wrap}}

${}等同于{{= }}，是输出变量。在${}里面还可以放表达式。注：=和变量之间一定要有空格，否则无效

每个标签使用方法此处查看：http://www.cnblogs.com/zhuzhiyuan/p/3510175.html

快速上手

<div id="div_demo"></div>

编写模板

使用一个type=”text/x-jquery-tmpl”的script标签存放模板，或者放到字符串中：

<script id="tpl" type="text/x-jquery-tmpl">
    <ul>
    　　<li>${ID}</li>
    　　<li>{{= Name}}</li>
    　　<li>${Number(Num)+1}</li>
    　　<li>${Status}</li>
    </ul>
</script>

 

渲染模板

<script type="text/javascript">
　　var users = [{ ID: '2017', Name: 'hello', Num: '1', Status: 1 }];
　　$("#tpl").tmpl(users).appendTo('#div_demo');
<script>

输出

针对数据不同更多的使用方法，在上方有"标签使用”的链接。