jQuery模板tmpl

参考学习网址“http://www.cnblogs.com/zhuzhiyuan/p/3510175.html”

和“http://www.cnblogs.com/wumadi/p/3443471.html”

 

给<script>设置type="text/template",标签里面的内容不会被执行,也不会显示页面上,但是可以在另一个 script里面通过获取,然后再通过相关的模板工具进行处理,插入到页面中。这样就把大段的HTML操作从js里面分离开了。

 

外部线上引入:jquery.min.js和jquery.tmpl.js

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

 


jquery tmpl 详解
jquery.tmpl的几种常用标签分别有:${},{{each}},{{if}},{{else}},{{html}}
${}:等同于{{=}},是输出变量,通过了html编码的。
{{each}}:提供循环逻辑,$value访问迭代变量。
{{if }} {{else}}:提供了分支逻辑。
{{html}}:输出变量html,但是没有html编码,适合输出HTML代码

【常见错误】:
①$(...).tmpl is not a function
未引入juqey和tmpl,方法
tmpl网址http://pan.baidu.com/s/1kVDarK7,密码:rtua
jquery网址:http://www.w3school.com.cn/jquery/jquery_install.asp
然后在head标签引入

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>jQ-tmpl</title>
    <script src="./lib/jquery/jquery.min.js"></script>
    <script src="./jquery-tmpl/jquery.tmpl.js"></script>
</head>
<body>
<table id="movieList" border="1px solid">
    <tr>
        <th>Name</th>
        <th>ReleaseYear</th>
    </tr>
</table>

<script id="movieTemplate" type="text/x-jquery-tmpl">
    <tr>
        <td>${Name}</td>
        <td>${ReleaseYear}</td>
    </tr>
</script>

<script type="text/javascript">
    var movies = [
        { Name: "The Red Violin",ReleaseYear: "1998" },{ Name: "Eyes Wide Shut",ReleaseYear: "1999" },{ Name: "The Inheritance",ReleaseYear: "1976" }
    ];
//    $('#movieList').html('').append($('#movieTemplate').tmpl(movies));
    $( "#movieTemplate" ).tmpl( movies ).appendTo( "#movieList" );
</script>
</body>
</html>

 

 

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...