jQuery模板tmpl

DevilPace

2017-07-20

参考学习网址“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>

DevilPace

0 关注 0 粉丝 0 动态

关注关注

安科网

jQuery模板tmpl

DevilPace

DevilPace

DevilPace