一、什么是JsViews：
1） 下一代MVVM框架，兼具MVVM的特性和JavaScript的特性，使JsRender模板更加快捷和简单。
2） JsViews框架引入了声明式的数据绑定到JsRender Template，支持MVVM和MVP（自定义标签控制）。
3）是一个用于数据绑定的单page的app。
4）JsViews提供了动态绑定的功能，构建与JsRender模板之上。让JsRender template动起来。
二、简单的例子：
1. 使用template.link()
<!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="../jsviews/jsviews.js"></script>
</head>
<body>
<table><tbody id="peopleList"></tbody></table>
<script id="peopleTmpl" type="text/x-jsrender">
<tr><td>
<ul>
{{for p}}
<li>
{{:name}}
</li>
{{/for}}
</ul>
</td></tr>
</script>
<script>
var myTemplate = $.templates("#peopleTmpl");
var people = [
{
name: "JoshWang"
},
{
name: "WangSheng"
}
];
var app = {
p: people
};
myTemplate.link("#peopleList", app);
</script>
</body>
</html>
说明：很容易看出这个例子和之前的JsRender sample的例子是极其类似的。唯一不同地方是，之前用于渲染template数据的两行代码现在只有一行代码即可。
var html = myTemplate.render(app);
$("#peopleList").html(html);
myTemplate.link("#peopleList", app);
第一个参数表示的是元素的container（此处是一个table）第二个参数表示的是用于渲染的数据。
2. Data-linking
在JsViews中使用data-linking来进行数据绑定。但是涉及到一些特殊的应用的时候，就需要使用obserable的数组和对象了。
例如，如果现在有一个对象，并且赋予其中一个属性 一个新的值，显然这里没有相关的事件来通知其他的code去更新该object。同样地，修改一个数组也不会有相关的事件通知其他的code做相关的更新。
基于这个原因，就出现了JsObservable(http://josh-persistence.iteye.com/admin/blogs/1916759), 它显示地提供了修改对象和数组的方法。
例子：（显示地修改对象和数组）
$("#addBtn").on("click", function(){
$.observable(people).insert(people.length, {name: "name"});
})
实例1：可视的数组和对象（可视的意思是该对象或者数组发生变化时，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="../jsviews/jsviews.js"></script>
</head>
<body>
<table><tbody id="peopleList"></tbody></table>
<script id="peopleTmpl" type="text/x-jsrender">
<tr><td>
<button id="addBtn">Add</button>
</td></tr>
{^{for p}}
<tr><td>
{{:name}}
</td></tr>
{{/for}}
</script>
<script>
var myTemplate = $.templates("#peopleTmpl");
var people = [
{
name: "JoshWang"
},
{
name: "WangSheng"
}
];
var app = {
p: people
};
var html = myTemplate.link("#peopleList", app);
$("#addBtn").on("click", function(){
$.observable(people).insert(people.length, {name: "newName"});
})
</script>
</body>
</html>
代码说明：点击Add按钮，会添加一条记录到Array中，然后该template就会自动更新并显示出新加的这一行。使用的code是：$.observable(people).insert(people.length, {name: "name"});
但是需要注意的是这个template和之前的template所有不同，{^{for ...}}。如果去掉^，然后重新点击Add Button后，你会发现没有任何的变化。这是因为任何的常规的JsRender 的标签：{{someTag...}}，无论是内置的还是自定义的，都可以通过添加^变成一个数据绑定标签：{^{some Tag...}}.换句话说，这样的标签就变成了动态的标签，当无论何时需要的哦时候，都会自动的的去重新渲染它（如果相关的数据发生变化时）。
简言之：^这样的标签是动态的可用于动态绑定的标签，而没有^的标签是死的标签，不能用于数据绑定。
实例2： 可视的变化：属性变化。（可视表示属性发生变化时，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="../jsviews/jsviews.js"></script>
</head>
<body>
<table><tbody id="peopleList"></tbody></table>
<script id="peopleTmpl" type="text/x-jsrender">
<tr><td colspan="2">
<button id="addBtn">Add</button>
</td></tr>
{^{for p}}
<tr>
<td>{^{:name}}</td>
<td>
<button class="changeBtn">Change</button>
</td>
</tr>
{{/for}}
</script>
<script>
var myTemplate = $.templates("#peopleTmpl");
var people = [
{
name: "JoshWang"
},
{
name: "WangSheng"
}
];
var app = {
p: people
};
var counter = 1;
myTemplate.link("#peopleList", app);
$("#addBtn").on("click", function() {
$.observable(people).insert(people.length, {name: "name"});
})
$("#peopleList").on("click", ".changeBtn", function() {
var dataItem = $.view(this).data;
$.observable(dataItem).setProperty("name", dataItem.name + counter++);
})
</script>
</body>
</html>
代码解读：
1） $.observable(myObject)可以获取该对象的可视形式，即使该对象变成可视对象，即该对象的修改会引起和他绑定的template中相关内容的自动更新。
2）var dataItem = $.view(this).data 用于获取当前需要修改的object。
3.基于标签的”data-link"
<td data-link="name"></td>
这和上一个例子中的：
<td>{^{:name}}</td>
具有相关的效果。
4. 双向的数据绑定：
<td data-link="name"></td> <td> <input data-link="name"/> </td>
<input>和<td>都是数据绑定的，这使得不需要向实例2中那样添加一个propertyChange(属性变化）来使得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="../jsviews/jsviews.js"></script>
</head>
<body>
<table><tbody id="peopleList"></tbody></table>
<script id="peopleTmpl" type="text/x-jsrender">
<tr><td colspan="2">
<button id="addBtn">Add</button>
</td></tr>
{^{for people}}
<tr>
<td data-link="name"></td>
<td>
<input data-link="name"/>
</td>
</tr>
{{/for}}
</script>
<script>
var myTemplate = $.templates("#peopleTmpl");
var people = [
{
name: "JoshWang"
},
{
name: "WangSheng"
}
];
var app = {
people: people
};
var counter = 1;
myTemplate.link("#peopleList", app);
$("#addBtn").on("click", function() {
$.observable(people).insert(people.length, {name: "name"});
})
</script>
</body>
</html>
5. 更加完整的例子：（在Select标签上使用数据绑定）
<!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="../jsviews/jsviews.js"></script>
</head>
<body>
<table><tbody id="peopleList"></tbody></table>
<script id="peopleTmpl" type="text/x-jsrender">
<tr><td>
<button id="addBtn">Add</button>
<button id="removeBtn" data-link="disabled{:selectedID === '0'}">Remove</button>
</td></tr>
<tr><td>
<select data-link="selectedID" size="5">
<option value="0">Choose a person to edit</option>
{^{for people}}
<option data-link="{:name} value{:ID} selected{:ID === ~root.selectedID}"></option>
{{/for}}
</select>
</td></tr>
<tr><td>
<label>Name:<input data-link="{:selected().name:} disabled{:selectedID === '0'}" /></label>
<label>Nickname:<input data-link="{:selected().nickname:} disabled{:selectedID === '0'}" /></label>
</td></tr>
<tr><td class="center">
{^{for selected()}}
{^{:name}}
{^{if nickname}}
( {^{:nickname}} )
{{/if}}
{{/for}}
</td></tr>
</script>
<script>
var myTemplate = $.templates("#peopleTmpl");
var people = [
{
ID: "Ad0",
name: "JoshWang"
},
{
ID: "Ro0",
name: "WangSheng",
nickname: "Jack"
}
];
var counter = 1;
var app = {
people: people,
selectedID: people[1].ID,
selected: function() {
for (var i=0; i<people.length; i++) {
if (people[i].ID === this.selectedID) {
return people[i];
}
}
return {};
}
};
app.selected.depends = "selectedID";
// Data-link details container to people, using the peopleTmpl template
myTemplate.link("#peopleList", app);
$("#addBtn").on("click", function(){
var newID = "new" + counter++;
$.observable(people).insert(people.length, {ID: newID, name: "name"});
$.observable(app).setProperty("selectedID", newID);
})
$("#removeBtn").on("click", function(){
$.observable(people).remove($.inArray(app.selected(), people));
$.observable(app).setProperty("selectedID", "0");
})
</script>
</body>
</html>
运行效果图：
三、综合实例
1. 动态绑定：所谓动态绑定就是当数据源发生变化时，与数据源绑定的组件也会动态的刷新。
<!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="../jsviews/jsviews.js"></script>
</head>
<body>
<div id="result"></div>
<script id="theTmpl" type="text/x-jsrender">
<div>
Edit: <input type="checkbox" data-link="editable"/>
<em>Name:</em> {^{:name}}
{^{if showNickname && nickname}}
(Goes by <em data-link="nickname"></em>)
{{/if}}
{^{if editable}}
<div>
<input data-link="name"/>
<input data-link="nickname"/>
<input type="checkbox" data-link="showNickname"/>
</div>
{{/if}}
</div>
</script>
<script>
var data = [
{
"name": "JoshWang",
"nickname": "DW",
"showNickname": true
},
{
"name": "Susan",
"nickname": "Sue",
"showNickname": false
}
];
var template = $.templates("#theTmpl");
template.link("#result", data);
</script>
</body>
</html>
代码解读
1）{^{name}} ... {^{if showNickname && nickname}}.这些标签是数据绑定标签，当与之关联的数据发生变化时，在template中相关的数据单元也会自动的发生变化。
2）将{{if...}}改成{^{if...}}同样是数据绑定。当关联的数据发生变化时，整个template部分的内容会自动的移除或者是重新插入。
3）<em data-link="nickname">： 同样可使用element-based来做数据绑定，这里表示<em>标签的文本内容会自动的绑定到nickName的值。
4） <input data-link="name"/>：这里 input会一双重绑定的方式自动的绑定到相关联数据的name属性。在这里，当修改input text box中的值的时候，相关的关联数据也会自动的更新，二该template的其他data-linked到同样属性(name)的部分也会立即自动的更新。
相关推荐
**JsRender与JsViews简介** ...总之，JsRender和JsViews是强大的前端工具，它们通过模板引擎和数据绑定机制，简化了动态Web应用的开发过程。理解和掌握这些知识点，对于提升Web开发效率和代码质量具有重要意义。
<script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#...
**jQuery 模板：JSRender 内置的模板标签** 在Web开发中，模板引擎是一种强大的工具，它允许我们分离数据和视图，使代码更易于维护和扩展。jQuery的一个扩展，JSRender，是一个轻量级但功能强大的模板库，提供了...
在实际应用中，开发者通常会先引入 jQuery 和 jQuery-jsrender.js，然后定义模板，接着绑定数据并渲染到页面上。例如： ```html <script src="jquery.min.js"> <script src="jquery-jsrender.js"> ...
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
自编博客技术栈：页面：H5+CSS3+JS+jQuery渲染模板：艺术模板后端-节点.js
`jQuery JSRender` 是一款高效且功能强大的JavaScript模板引擎，它是jQuery插件家族的一员，专为构建动态数据驱动的Web界面而设计。该库允许开发者通过简洁易读的语法创建复杂的HTML模板，从而在不涉及大量DOM操作的...
`jquery-jtemplates_uncompressed.js`是未压缩的源码版本，开发者可以通过阅读源码了解jTemplates的内部实现机制，如模板解析、数据绑定和DOM操作等。 ### 6. CSS样式 `TemplateCSS.css`可能是为示例模板提供的...
jquery插件jquery-ui-timepicker-addon.j
6. **递归模板**：JsRender 支持递归模板，这意味着可以在模板中嵌套使用同一个模板，这对于处理层次结构的数据非常有用。 7. **双向数据绑定**：尽管JsRender 主要是为单向数据绑定设计的，但它可以通过配合...
MVVM的功能，JavaScript的灵活性，JsRender模板和jQuery的速度和便捷性 JsViews建立在模板之上，并添加了数据绑定和，从而提供了完整的MVVM平台，可轻松创建交互式数据驱动的单页应用程序和网站。 文档和下载 可在上...
《jQuery核心库：深入理解jquery-3.3.1.js与jquery.min-3.3.1.js》 jQuery，作为一款广泛使用的JavaScript库，极大地简化了网页中的DOM操作、事件处理、动画设计以及Ajax交互。在给定的文件中，我们有两个版本的...
jquery-ui日历控件还是很人性化的，但官网没找到很好的中文版，这里上传一下
jquery-1.4.2.min.js jquery-1.4.3-vsdoc.js jquery-1.4.3.min.js jquery-1.4.4-vsdoc.js jquery-1.4.4.min.js jquery-1.4.min.js jquery-1.5-vsdoc.js jquery-1.8.2-vsdoc.js jquery-2.1.0jquery-2.1.0 ...
在本篇文章中，我们将深入探讨 jQuery 的核心特性、优点以及如何在实际项目中应用这两个文件："jquery-3.2.0.js" 和 "jquery-3.2.0.min.js"。** ### 1. jQuery 核心特性 **DOM 操作：** - **选择器（Selectors）**...
jquery.fireworks.js 插件描述:jquery-fireworks.js是一款基于HTML5 Canvas的逼真烟花特效jQuery插件。该插件使用简单,并可自由进行配置。它可以在一个div容器中生成逼真的燃放...
在本篇文章中，我们将深入探讨其自定义版本 `jquery-ui-1.8.18.custom.min.js` 和相关的 CSS 文件，以理解它们如何协同工作，为网页带来强大的功能和美观的界面。 首先，`jquery-ui-1.8.18.custom.min.js` 是 ...
二、`jquery-3.0.0.min.js`的优化 1. 文件大小：`.min.js`是经过压缩和混淆后的版本，文件大小显著减小，有利于提高页面加载速度，降低用户等待时间。 2. 代码优化：通过删除注释、合并变量、缩短函数名等手段，`....
《jQuery 1.11.3：核心特性与应用...无论你是初学者还是经验丰富的开发者，理解并掌握jQuery都能大大提高你的工作效率。在实际开发中，结合良好的编程习惯和适当的插件使用，可以构建出高效、用户体验优秀的Web应用。