JQuery模板 ：(九) JsRender之JsViews中的JsObserverable
一、什么是JsObserverable:
JsObservable library 是JsViews的一部分，用于在JsViews中提供数据绑定的功能。同样允许JsViews的应用触发数据的变化，使用程序的方式（JsObserverable API）来“观察”数据的变化以实现数据绑定功能，数据是observerable(可视的）意思是该数据（可视数据）的变化会引起与之绑定的template中的数据及时的发生变化。
二、实例代码：
<!DOCTYPE html>
<html>
<head>
<link href="../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="result"></tbody></table>
<script id="theTmpl" type="text/x-jsrender">
<tr><td>
<button id="addBtn">Add</button>
</td></tr>
{^{for people}}
<tr><td>
<button class="change">Change</button>
<button class="remove">X</button>
{^{:name}}
</td></tr>
{{/for}}
</script>
<script>
var template = $.templates("#theTmpl");
var people = [
{
name: "JoshWang"
},
{
name: "WangSheng"
}
];
var counter = 1;
template.link("#result", {people: people});
$("#addBtn").on("click", function(){
$.observable(people).insert(people.length, {name: "name" + counter++});
})
$("#result")
.on("click", ".change", function(){
var dataItem = $.view(this).data;
$.observable(dataItem).setProperty("name", dataItem.name + "*");
})
.on("click", ".remove", function(){
var index = $.view(this).index;
$.observable(people).remove(index);
});
</script>
</body>
</html>代码解读：
1） JsObservable API：$.observable(object).setProperty(...);
$.observable(dataItem) 使得dataItem是可视的，通过setProperty()方法，相关的变化将会被template中声明的动态绑定观察的，即相关的变化，会引起与之绑定的动态数据的变化。
2）JsObservable API： $.observable(array).insert(...);
$.observable(people)使得people这个数组是可视的，通过提供方法insert()和remove(),表示数组的变化也是可视的，即template中与之绑定的元素和标签，例如{^{for people}} 签也会随之变化。
3）JsObservable API： .view(elem)
.view(elem) 用于将任何的DOM元素变成当前可视的Object.
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17