一、什么是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.
相关推荐
NULL 博文链接:https://josh-persistence.iteye.com/blog/1915730
NULL 博文链接:https://josh-persistence.iteye.com/blog/1914697
MVVM的功能,JavaScript的灵活性,JsRender模板和jQuery的速度和便捷性 JsViews建立在模板之上,并添加了数据绑定和,从而提供了完整的MVVM平台,可轻松创建交互式数据驱动的单页应用程序和网站。 文档和下载 可在上...
jquery 插件 高性能的js模板引擎
jquery 插件 高性能的js模板引擎,jquery-jsrender.js
JsRender用于将数据驱动的模板渲染为字符串,以准备插入DOM中。 平台也使用它,它向JsRender模板添加了数据绑定,并提供了完整的MVVM平台,可轻松创建交互式数据驱动的单页应用程序和网站。 JsRender安装 jsrender...
jquery.fireworks.js 插件描述:jquery-fireworks.js是一款基于HTML5 Canvas的逼真烟花特效jQuery插件。该插件使用简单,并可自由进行配置。它可以在一个div容器中生成逼真的燃放...
jQuery圆角插件:jquery.corners.js
jQuery插件:可拖动的图片展示实例(效果超酷) jQuery插件:可拖动的图片展示实例(效果超酷)
jquery 特效:imageScroller滚动图片效果 用于创建滚动图片效果的jquery案例指导!
jquery.form.js jquery.form.js
JsRedner和JsViews(JsViews是再JsRender基础上的进一步封装)被称为下一代的Jquery模板,官方地址: https://github.com/BorisMoore/jsrender; https://github.com/BorisMoore/jsviews。 循环是模版引擎必不可少的...
jquery-3.0.0.js 、jquery-3.0.0.min.js 【官方jquery包 js】
JQuery插件:alert、confirm、prompt对话框插件
jquery.cookie.js,jquery-1.11.0.min.js,respond.min.js, bootstrap.min.js,html5shiv.js
jquery上传文件和参数封装的js:jquery.form.js,可用于单文件、上文件上传以及携带参数
jquery.pagination.js 下载,优秀的jquery分页插件,使用IP代理国外网站下载而来
jquery.color.js
jquery.media.js