本文详细介绍了JsViews，一个基于JsRender并支持动态数据绑定的模板库。内容包括：JsViews作为下一代MVVM框架的特性，如何使用template.link()和data-linking进行数据绑定，JsObservable在对象和数组修改中的作用，以及各种动态绑定示例，展示了双向绑定和元素级数据绑定的用法。文章最后提供了一个综合实例，演示了动态绑定在实际场景中的应用。
一、什么是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：可视的数组和对象（
最低0.47元/天 解锁文章
713
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
