您的位置:首页 > Web前端 > JQuery

关于jQuery.template的学习总结

2017-05-02 17:12 162 查看

(一)emplate的引用

         引入jquery.js和jquery.tmpl.js两个包。jquery.tmpl.js包的下载地址:http://justcode.ikeepstudying.com/wp-content/uploads/2016/08/jquery-tmpl-master.zip。把包引入项目中(直接在你的WebContent目录下建scripts文件夹,把下载的压缩包解压,把jquery.tmpl.js包拷贝到目录下),引包的方法不在赘述,不会的直接百度js如何引包。

(二)实例

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/jquery.tmpl.js" type="text/javascript"></script>
<script id="each" type="text/x-jquery-tmpl">
        <tr><td>ID:{{= ID}}</td><td>Name:{{= Name}}</td></tr>
</script>
<script type="text/javascript">
    $(function(){
         var userLangs = [
                          {
                             ID: 'think8848', Name: 'Joseph Chan'
                           },
                          {
                               ID: 'aCloud', Name: 'Mary Cheung'
                           }];
                             //模板   绑定    数据      添加到   指定的div或者是容器里面
                           $('#each').tmpl(userLangs).appendTo('#eachList');
    });
</script>
</head>
<body>
    <table id="eachList" border="1px;"></table>
</body>
</html>

这是简单的一个实现。

(三)注意

       有些时候${}的方法不可使用,要用{{= 名字}}来写,具体·是为什么我也没找见,如果有大神,可以指教一二。


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: