前言：
Jquery UI团队在决定废弃原有的模板解决方案tmpl后（http://josh-persistence.iteye.com/admin/blogs/1914231），Query Template插件的驱动力--Boris Moore--与jQuery UI团队一起，继续开发新的jQuery模板。在2011年10月，Moore发表了一篇博客(http://www.borismoore.com/ 2011/10/jquery-templates-and-jsviews-roadmap.html)，更新了新插件工作进度的信息。在该博客中，他声明最终的解决方案将包含两个部分：
（一） JsRender模板，被称为"下一代jQuery模板"，为高性能的、纯粹基于字符串的呈现做了优化，并且不依赖于DOM或jQuery。
（二） JsViews模板，它是"交互性的数据驱动视图，构建于JsRender模板之上"。
一、什么是JsRender？
JsRender是一个简单、直观，强大、易扩展、轻量的最优UI模板。
换句话说，就是在Html文件中使用java script来输出html模板的内容。
二、附件是最新的jsrender.js和jsrender.min.js（2013/07/27），如果想下载最新的jsrender.js和jsrender.min.js,可以去官方文档下载：http://www.jsviews.com/#download
二、玩转JsRender
内置的模板标签（Built-in template tags）
1. {{: ...}}：用于输出"..."部分指定的数据，“...”部分是数据来源的路径或者是一个数据表达式，例如：{{:address.street}}
例子：
<!DOCTYPE html>
<html>
<head>
<link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/>
<script src="../jquery/jquery-2.0.3.js"></script>
<script src="../jsrender/jsrender.js"></script>
</head>
<body>
<p><em><h2>1: Output Tag {{:...}}</h2></em></p>
<div id="result"></div>
<div id="result2"></div>
<script id="theTmpl" type="text/x-jsrender">
<p> {{:name}} </p>
<p>
{{:name}}: lives in <b>{{:address.city}}</b>.<br />
Here is <em>~root.address.city</em>: <b>{{:~root.address.city}}</b><br />
Here is <em>~#data.address.city</em>: <b>{{:#data.address.city}}</b>
</p>
</script>
<script id="theTmpl2" type="text/x-jsrender">
<b>{{:#index+1}}:</b>
{{:name}}: lives in <b>{{:address.city}}</b>.<br />
</script>
<script>
var data1 = {
"name": "Josh",
"address": {
"city": "Shanghai"
}
}
var data2 = [
{
"name": "Josh",
"address": {
"city": "Shanghai"
}
},
{
"name": "Wangsheng",
"address": {
"city": "BiJie"
}
}
];
var htmlOutput = $("#theTmpl").render(data1);
$("#result").html(htmlOutput);
var template = $.templates("#theTmpl2");
var htmlOutput2 = template.render(data2);
$("#result2").html(htmlOutput2);
</script>
</body>
</html>
其中：在jsRender中，#xxx 表示当前view的 xxx 属性， - 所以 #index 就是view.index
{{:#index+1}}
运行的结果：
2. {{>...}} 用于输出encoded的html。
<!DOCTYPE html>
<html>
<head>
<link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/>
<script src="../jquery/jquery-2.0.3.js"></script>
<script src="../jsrender/jsrender.js"></script>
</head>
<body>
<div id="result"></div>
<script id="theTmpl" type="text/x-jsrender">
{{:description}}<br/>
{{>description}}
</script>
<script>
var data = {
"description": "A <b>very nice</b> appartment"
};
var template = $.templates("#theTmpl");
var htmlOutput = template.render(data);
$("#result").html(htmlOutput);
</script>
</body>
</html>
输出结果：
A very nice appartment
A <b>very nice</b> appartment
3. {{include tmpl=... /}} 标签用于组合模板(template composition) -----用于在一个模板中引入另一个模板，并用上下文的数据来渲染template。
<!DOCTYPE html>
<html>
<head>
<link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/>
<script src="../jquery/jquery-2.0.3.js"></script>
<script src="../jsrender/jsrender.js"></script>
</head>
<body>
<script id="peopleTemplate" type="text/x-jsrender">
<div>
{{:name}} lives in {{include tmpl="#addressTemplate"/}}
</div>
</script>
<script id="addressTemplate" type="text/x-jsrender">
<b>{{>address.city}}</b>
</script>
<div id="peopleList"></div>
<script>
var people = [
{
"name": "Pete",
"address": {
"city": "Seattle"
}
},
{
"name": "Heidi",
"address": {
"city": "Sidney"
}
}
];
var html = $("#peopleTemplate").render(people);
$("#peopleList").html(html);
</script>
</body>
</html>
输出结果：
4. {{for ...}}遍历数组和对象
1) {{for ...}}遍历对象：
<!DOCTYPE html>
<html>
<head>
<link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/>
<script src="../jquery/jquery-2.0.3.js"></script>
<script src="../jsrender/jsrender.js"></script>
</head>
<body>
<script id="peopleTemplate" type="text/x-jsrender">
<div>
{{:name}} lives in {{include tmpl="#addressTemplate"/}}
</div>
</script>
<script id="addressTemplate" type="text/x-jsrender">
<b>{{>address.city}}</b>
</script>
<div id="peopleList"></div>
<script>
var people = [
{
"name": "Josh",
"address": {
"city": "Shanghai"
}
},
{
"name": "WangSheng",
"address": {
"city": "GuiYang"
}
}
];
var html = $("#peopleTemplate").render(people);
$("#peopleList").html(html);
</script>
</body>
</html>
输出结果：
2) {{for...}} 遍历数组
<!DOCTYPE html>
<html>
<head>
<link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/>
<script src="../jquery/jquery-2.0.3.js"></script>
<script src="../jsrender/jsrender.js"></script>
</head>
<body>
<div id="result"></div>
<script id="theTmpl" type="text/x-jsrender">
<b>{{:title}}</b>
<ul>
{{for members}}
<li>{{:name}} lives in <b>{{:address.city}}</b></li>
{{/for}}
</ul>
</script>
<script>
var data = {
"title": "The People:",
"members": [
{
"name": "JoshWang",
"address": {
"city": "ShangHai"
}
},
{
"name": "WangSheng",
"address": {
"city": "GuiYang"
}
}
]
};
var template = $.templates("#theTmpl");
var htmlOutput = template.render(data);
$("#result").html(htmlOutput);
</script>
</body>
</html>
3）在{{for...}}与{{for...}}之间使用{{else...}}
<!DOCTYPE html>
<html>
<head>
<link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/>
<script src="../jquery/jquery-2.0.3.js"></script>
<script src="../jsrender/jsrender.js"></script>
</head>
<body>
<div id="result"></div>
<script id="theTmpl" type="text/x-jsrender">
<b>{{:title}}</b>
{{for members}}
<div>{{:name}}</div>
{{else}}
<div>No members!</div>
{{/for}}
</script>
<script>
var data = {
"title": "The A team",
"members": []
};
var template = $.templates("#theTmpl");
var htmlOutput = template.render(data);
$("#result").html(htmlOutput);
</script>
</body>
</html>
输出结果：
The A team
3) {{if ...}}...{{else}}...{{/if}}
{{if pathOrExpr}...{{else}}...{{/if}}
{{if pathOrExpr1 tmpl=nameOrExpr1 }}{{else tmpl=nameOrExpr2 }}{{/if}}
4) {{if ....}}...{{else ...}}...{{else}}...{{/if}}
{{if pathOrExpr1}}...{{else pathOrExpr2}}...{{else}}...{{/if}
<!DOCTYPE html>
<html>
<head>
<link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/>
<script src="../jquery/jquery-2.0.3.js"></script>
<script src="../jsrender/jsrender.js"></script>
</head>
<body>
<div id="result"></div>
<script id="theTmpl" type="text/x-jsrender">
<h4>{{:title}}</h4>
{{if members && members.length}}
<ul>
{{for members}}
<li>{{:name}}</li>
{{/for}}
</ul>
{{else standby && standby.length}}
Standby only:
<ul>
{{for standby}}
<li>{{:name}}</li>
{{/for}}
</ul>
{{else}}
No members!
{{/if}}
</script>
<script>
var data = [
{
"title": "The A team",
"members": [
{
"name": "JoshWang"
},
{
"name": "Micheal Shi"
}
],
"standby": [
{
"name": "Xavier"
}
]
},
{
"title": "The B team",
"members": [],
"standby": [
{
"name": "Dunk"
},
{
"name": "Adriana"
}
]
},
{
"title": "The C team",
"standby": []
}
];
var template = $.templates("#theTmpl");
var htmlOutput = template.render(data);
$("#result").html(htmlOutput);
</script>
</body>
</html>
输出结果：
The A team
- JoshWang
- Micheal Shi
The B team
Standby only:
- Dunk
- Adriana
The C team
No members!
6. 前面提到的{{else ...}}, {{else ...}}标签可以用于{{if}}，{{for}}或者是自定义标签。
1）{{else}}用于{{if}}
{{if expression}}
render this if the expression is true
{{else}}
render this if the expression is false
{{/if}}
2）{{else}}用于{{for}}
{{for members}}
Member Name: {{:name}}
{{else}}
There are currently no members...
{{/for}}
3）{{else}}用于自定义标签：
{{tabs tabCaption="First Tab"}}
first tab content
{{else tabCaption="Second Tab"}}
second tab content
{{/tabs}}
7. 注释标签：{{!-- ... --}}
注：JsRender的注释标签和HTML的注释标签是相对的。你可以在JsRender的代码块中包含如下的代码：
<!-- This is an HTML comment -->
但是这个标签不会被JsRender或者是JsViews忽略掉，会包含在渲染的输出中。
相关推荐
5. **与jQuery集成**：虽然JsRender可以独立使用，但它与jQuery有很好的集成，可以方便地与jQuery插件和方法一起使用。 6. **递归模板**：JsRender 支持递归模板，这意味着可以在模板中嵌套使用同一个模板，这对于...
JSRender的核心理念是使模板编写变得简单，易于理解和维护，同时提供丰富的功能，如数据绑定、条件语句、循环结构和自定义标签。 **1. JSRender的基本语法** JSRender的模板语法以`{{`和`}}`作为标记，用于包裹...
HTMLRender是一款基于jQuery的数据绑定模板引擎，主要用于帮助开发者在JavaScript中高效地进行DOM操作和数据渲染。这款插件是jQuery的一个扩展，它提供了一种简洁的语法来将数据与HTML结构进行绑定，使得动态生成和...
标签中的“jquery-ui”表明这个工具可能还整合了jQuery UI库，它是jQuery的一个扩展，提供了更多高级的交互控件和特效，如日期选择器、对话框、排序列表等。jQuery UI的使用进一步丰富了页面生成器的功能，使得用户...
在本文中，我们将深入探讨如何使用下划线JS（Underscore.js）、jQuery以及clndr.js库来创建一个这样的迷你日历。这三种技术结合，可以为用户提供一个直观且易于操作的日历组件。 首先，让我们了解一下这三个关键...
6. **模板引擎**：虽然不内置任何模板引擎，但可以方便地集成 Handlebars, Mustache 或其他模板库，实现动态数据绑定。 **使用步骤：** 1. **安装**：可以通过npm或直接下载源码，将其引入到项目中。 2. **创建...
5. **模板引擎集成**：Backbone本身不包含内置的模板引擎，但推荐使用如Underscore或Lo-Dash的模板功能。`Backbone.View`的`render`方法常用于更新视图，通常涉及模板渲染。 学习Backbone.js的源码能让我们更好地...
**Backbone.js 入门详解** Backbone.js 是一个轻量级的JavaScript库，它为构建复杂的、数据...在实践中不断探索，你会发现Backbone.js的强大之处在于它提供的结构和模块化，使得大型项目的维护和扩展变得更为轻松。
8. **轻量级**：BackBone自身只提供基础框架，不捆绑任何特定的DOM操作库或模板引擎，开发者可以根据需要选择Underscore.js、jQuery等库配合使用。 通过这个"BackBone图书源码"，你可以深入理解这些概念，看到它们...
7. **使用第三方库**：像Validator.js、 parsley.js 或其他类似的JavaScript库可以提供更丰富的验证效果和自定义选项。 总的来说，ASP.NET验证提示的美化是一个涉及前端设计和后端逻辑的过程。通过对验证控件样式...
在.NET 2.0中，我们可以使用ASP.NET内置的GridView、DataList或Repeater控件的Paging属性来实现简单的分页。但为了实现更定制化的分页功能，我们通常会创建自定义的用户控件。 创建用户控件（UserControl）： 1. 在...
~/Contents/js/jquery-3.3.1.min.js"> ~/Contents/assets/layui/layui.all.js"> ``` 然后，通过layui的`table`模块来渲染表格，并配置`toolbar`参数： ```javascript layui.use('table', function () { var table...
4. **音频库**: Flask-Player可能依赖于像jQuery或Vue.js这样的JavaScript库，以及专门处理音频的库，如Howler.js或Audio.js，来实现音频播放控制。 5. **配置与设置**: 开发者可以通过配置Flask-Player的设置来...
<script src="path/to/jquery.min.js"> <script src="path/to/fullcalendar.min.js"> <div id="calendar"></div> document.addEventListener('DOMContentLoaded', function() { var calendarEl = document...
注意：由于文件大小为111MB，但本人的上传权限只有60MB，所以分开两部分压缩上传。解压前必须与part2一起解压。...附录a .net 3.5技术教程系列——collection/asp.net ajax/ silverlight/jquery ...646
注意：由于文件大小为111MB，但本人的上传权限只有60MB，所以分开两部分压缩上传。解压前必须与part2一起解压。...附录a .net 3.5技术教程系列——collection/asp.net ajax/ silverlight/jquery ...646
Laravel内置了分页功能，通过在控制器中使用`paginate`方法分页查询数据，然后在视图中使用`$students->render()`渲染分页链接。 6. 表单验证： laravel提供`validate`方法来验证表单数据。例如，当用户通过POST...
<script src="/static/jquery-3.2.1.min.js"> 用户名"> 密码"> 提交"> ``` 接下来，编写登录视图函数： ```python from django.shortcuts import render, redirect def login(request): if request....
根据实际需求，你可以进一步扩展此功能，例如添加数据过滤、排序或使用JavaScript库如jQuery或Plotly.js进行更复杂的数据可视化。 在实际项目中，确保CSV文件路径正确，且文件与`app.py`在同一目录下。如果CSV文件...