作者：jQuery | 时间：2014-4-17 14:35:28 | [小  大] | 来源：jQuery tmpl | 

阅读：11695 | 

  ： 1 |  收藏 jQuery，tmpl，数据，模板，框架，实战，经验，诞生，HTML，列表   [摘要]： 亲，你还在为页面数据异步加载列表而在写赋值的for循环吗？是不是也在想着前端要是有一个类似asp.net内gridview的东西就好了，根据模板提供数据实现自动绑定？现在我就可以果断地告诉你，目前来说前端已经有这样一个插件了，这个插件就是jQuery tmpl。 jQuery tmpl做一个前端模板数据插件，根据数据借用模板生成HTML的框架，很是收到欢迎，关于更多的资料可以继续如下方式访问： 官方网址： github网址：https://github.com/jquery/jquery-tmpl        

亲，你还在为页面数据异步加载列表而在写赋值的for循环吗？是不是也在想着前端要是有一个类似asp.net内gridview的东西就好了，根据模板提供数据实现自动绑定？现在我就可以果断地告诉你，目前来说前端已经有这样一个插件了，这个插件就是jQuery tmpl。

jQuery tmpl做一个前端模板数据插件，根据数据借用模板生成HTML的框架，很是收到欢迎，关于更多的资料可以继续如下方式访问：

官方网址：

从jQuery tmpl的简单几句描述内可以看出jQuery tmpl需要些什么？

1、数据（心脏）；

2、模板（骨架）；

3、jQuery（血管）；

jQuery tmpl是一款基于jQuery进行扩展的数据插件，自然是少不了jQuery.js的承载。

如何在实际中使用jQuery tmpl？

一个东西了解和学习了的最终目的还是想在实际的项目中加以使用才得以体现其价值所在。在项目中需要普遍通过一下几个步骤使用jQuery tmpl插件：

1、去官方下载jQuery.js；

2、去github内下载zip包然后拿出内部的jquery.tmpl.js或者其他tmpl.js文件；

3、创建一个html页面index.html,然后在head头部引入js文件，引入的时候需要注意jQuery.js引入必须在jquery.tmpl.js之前，形如：

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="js/jquery.tmpl.js" type="text/javascript"></script>

4、在body内创建一个div容器用于存放生成好的html代码

<!--容器--> <div> </div>

5、定义一个数据生成的模板

模板定义是在script代码段内进行，且需要指定id和type类型为text/x-jquery-tmpl

<!-- 模板定义 --> <script type="text/x-jquery-tmpl"> <div> 　　　　<span>${UserNo}</span> 　　　　<span>{{= WebSite}}</span> 　　{{html Url}} </div> </script>

这里定义了一个简单的模板，模板内是一个div，看得出来有三列数据，UserNo、WebSite和Url。最后一列为何前面写上了html，表示当前字段内容以html代码的形式进行渲染，简单地说就是采用document内的innerHTML进行赋值，而不是innerText形式。

6、提供json的List数据然后用jQuery tmpl进行赋值

<!--提供数据根据模板生成数据且加载至某个容器内显示--> <script type="text/javascript"> //一个Json数组 　　 var userList = [ { UserNo: 'stepday', WebSite: 'www.stepday.com', Url: '<a href="http://www.stepday.com" target="_blank">STEP DAY</a>' }, { UserNo: 'tuiwosa', WebSite: 'www.tuiwosa.com', Url: '<a href="http://www.tuiwosa.com" target="_blank">推我撒</a>' } ]; //巧用tmpl()方法生成数据 $("#html").tmpl(userList).appendTo('#div_html'); </script>

Json数据内的name值必须要和模板内的属性名称保持一致，另外在赋值的时候是指定模板的id然后通过tmpl(userList)方法提供数据，最后将生成好的html数据附加到容器内通过appenTo()方法。

关于更多的jQuery tmpl插件的模板定义和使用方法请继续关注后续文章的详细解说！以上示例是通过本人亲自测试，所以有任何问题随时留言沟通。

jQuery，tmpl，数据，模板，框架，实战，经验，诞生，HTML，列表    本文为原创型文章转载请尊重他人劳动成果并注明出处：?865  可以扫描本站该博客文章的QR二维码进行访问  

上一篇：highcharts图表组件实战篇：平滑曲线如何做到点击数据点时将其用一个图片做标记