参考学习网址“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 tmpl.js 模板引擎详解及应用》 在Web开发中，模板引擎是一种非常重要的工具，它允许开发者将数据和HTML结构分离，提高代码的可读性和复用性。jQuery tmpl.js是jQuery的一个插件，它提供了一种简单而强大的...
本文将深入探讨jQuery-Tmpl，一个用于在jQuery中实现模板引擎的插件，以及它如何帮助开发者构建动态、数据驱动的用户界面。 一、jQuery-Tmpl简介 jQuery-Tmpl是jQuery的一个扩展，提供了模板编译和渲染的功能。这...
总的来说，jQuery tmpl.min.js是jQuery生态中一颗璀璨的明珠，它通过提供高效、易用的模板引擎，极大地提升了Web应用的数据呈现能力，同时保持了良好的浏览器兼容性。无论你是新手还是经验丰富的开发者，掌握这一...
《jQuery tmpl：强大的JavaScript模板引擎解析》 在前端开发中，数据绑定和动态渲染是常见的需求，jQuery tmpl作为一款强大的JavaScript模板引擎，为开发者提供了高效、简洁的解决方案。本文将深入探讨jQuery tmpl...
这段代码首先定义了一个数据对象，然后使用jQuery选择器找到模板（这里模板的id为"template"），并调用`.tmpl()`方法，传入数据对象，最后将渲染后的结果追加到页面的`body`元素中。 tmpl.js也支持条件语句，如`{{...
在上一篇文章中我们已经探讨了jQuery.tmpl的基本用法，但在实际开发中，我们经常需要根据用户交互、URL参数或其他动态条件来异步加载模板或数据。这就是动态Ajax扩展的作用。 动态Ajax扩展是jQuery.tmpl的一个重要...
添加的版本：1.4.3 jQuery.tmpl（template [，data] [，options]） template用作模板的HTML标记或文本。 数据的数据呈现。这可以是任何JavaScript类型，包括Array或Object。 options用户定义的键/值对的可...
4. **渲染模板**：使用jQuery的`.tmpl()`方法将数据应用到模板上，并将其插入到DOM中。如下所示： ```javascript $("#myTemplate").tmpl(data).appendTo("#listContainer"); ``` 在这个例子中，`#listContainer`是...
需要注意的是，JQuery.tmpl模板插件虽然方便易用，但它在最新版的jQuery中并不是默认包含的，因为jQuery核心团队推荐使用其他模板解决方案，如Mustache或者Handlebars。这并不影响JQuery.tmpl本身的使用，但如果需要...
而`.tmpl()`和`.template()`是jQuery UI中的两个重要功能，用于模板引擎，帮助开发者构建动态数据驱动的用户界面。这篇综合指南将深入探讨这两个方法的用法和原理，以帮助你更好地理解和应用它们。 首先，我们来...
jQuery tmpl通过`<script>`标签来定义模板，通常设置`type`属性为`text/x-jquery-tmpl`。例如： ```html <script type="text/x-jquery-tmpl" id="userListTpl"> ${Name} ${Email} ``` 这里的`id`属性用于...
官方推荐的模板定义方式是使用专门的script标签，并指定类型为"text/x-jquery-tmpl"。例如： ```html <script id="myTemplate" type="text/x-jquery-tmpl"> <tr><td>${ID}</td><td>${Name}</td></tr> ``` 但除了...
**jQuery tmpl 模板技术详解** 在Web开发中，数据绑定和动态内容渲染是不可或缺的部分。jQuery tmpl 是一个轻量级的JavaScript模板引擎，它允许开发者将数据与HTML结构分离，实现更高效的页面渲染和更新。这篇详述...
在jQuery中，虽然没有内置的模板引擎，但可以借助第三方库如Mustache、Handlebars或jQuery自己的插件如jQuery tmpl来实现。这些模板引擎支持各种模板语法，使开发者能够灵活地设计和渲染数据。 **四、使用jQuery...
最后，要注意的是，jquery.tmpl虽然在功能上能够满足一些简单的模板需求，但它并不是一个功能完备的模板引擎，如果项目中模板的复杂度较高，可能需要考虑其他更加成熟和功能丰富的模板引擎，如Mustache、Handlebars...
jQuery `.tmpl()` 是一个用于在JavaScript环境中处理数据并生成HTML模板的函数，它极大地简化了动态数据渲染的过程。这个功能最初是由jQuery插件社区开发的，后来被jQuery官方接纳为官方模板插件。`.tmpl()` 的核心...