一、什么是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.
?
?
?