一、什么是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, 它显示地提供了修改对象和数组的方法。
? ? ? 例子：（显示地修改对象和数组）
$("#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...}}.换句话说，这样的标签就变成了动态的标签，当无论何时需要的哦时候，都会自动的的去重新渲染它（如果相关的数据发生变化时）。
? ? ?
