一、什么是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.
相关推荐
在项目中引入JsViews,通常需要同时引入`jsrender.js`和`jsviews.js`两个文件。这两个文件分别提供了模板引擎和数据绑定功能。 **3. 数据绑定概念** JsViews 引入了双向数据绑定的概念,这意味着视图的改变会同步到...
**jQuery 模板:JSRender 内置的模板标签** 在Web开发中,模板引擎是一种强大的工具,它允许我们分离数据和视图,使代码更易于维护和扩展。jQuery的一个扩展,JSRender,是一个轻量级但功能强大的模板库,提供了...
1. **简洁的语法**:JSRender 使用类似于 Handlebars 或 Mustache 的双大括号语法 (`{{ }}`),使得模板代码易于阅读和编写。例如,`{{:name}}` 用于输出变量 `name` 的值。 2. **数据绑定**:通过模板表达式,你...
6. **递归模板**:JsRender 支持递归模板,这意味着可以在模板中嵌套使用同一个模板,这对于处理层次结构的数据非常有用。 7. **双向数据绑定**:尽管JsRender 主要是为单向数据绑定设计的,但它可以通过配合...
`jQuery JSRender` 是一款高效且功能强大的JavaScript模板引擎,它是jQuery插件家族的一员,专为构建动态数据驱动的Web界面而设计。该库允许开发者通过简洁易读的语法创建复杂的HTML模板,从而在不涉及大量DOM操作的...
MVVM的功能,JavaScript的灵活性,JsRender模板和jQuery的速度和便捷性 JsViews建立在模板之上,并添加了数据绑定和,从而提供了完整的MVVM平台,可轻松创建交互式数据驱动的单页应用程序和网站。 文档和下载 可在上...
2. **数据绑定**: JsRender 提供了强大的数据绑定能力,允许在模板中直接访问和操作数据模型,无需额外的绑定层。 3. **标签语法**: 除了基本的表达式输出,JsRender 还支持自定义标签,如 `{{for}}`(循环)、`{{...
JSRender允许创建自定义标签,这使得在模板中可以扩展功能。自定义标签可以通过注册`$.fn.renderTag`来实现。 **5. 助手函数** JSRender提供了内置的助手函数,如`{{formatDate}}`,可以对数据进行格式化处理。...
JsRender用于将数据驱动的模板渲染为字符串,以准备插入DOM中。 平台也使用它,它向JsRender模板添加了数据绑定,并提供了完整的MVVM平台,可轻松创建交互式数据驱动的单页应用程序和网站。 JsRender安装 jsrender...
自编博客技术栈:页面:H5+CSS3+JS+jQuery渲染模板:艺术模板后端-节点.js
而jQuery.color.js是jQuery的一个扩展插件,它为jQuery对象添加了对颜色操作的支持,使得在网页动态效果中处理颜色变得更加简单。本文将深入探讨这个插件的核心功能、使用方法以及在实际开发中的应用。 首先,我们...
jquery.fireworks.js 插件描述:jquery-fireworks.js是一款基于HTML5 Canvas的逼真烟花特效jQuery插件。该插件使用简单,并可自由进行配置。它可以在一个div容器中生成逼真的燃放...
今天我们要探讨的是一个基于jQuery的插件——jQuery.media.js,它为网页中的多媒体内容展示提供了丰富的支持。本文将深入解析jQuery.media.js的核心原理,并分享其在实际项目中的应用技巧。 一、jQuery.media.js...
在描述中提到的`jquery.qrcode.js`,就是将jQuery与二维码生成功能结合的插件。这个插件允许你在HTML元素上直接绘制二维码,无需任何服务器端的支持,大大简化了开发流程。使用这个插件,你可以通过指定一些参数,如...
在压缩包中,我们有两个jQuery相关的文件——`jquery.min.js`和`jquery-1.11.0.min.js`。`jquery.min.js`可能是指较新的版本,而`jquery-1.11.0.min.js`是jQuery 1.11.0的压缩版本,它提供了基本的DOM操作和功能,如...
- **引入jQuery和jTemplates库**:首先需要在页面中引入jQuery库(如`jquery-1.2.6.pack.js`)和jTemplates插件(如`jquery-jtemplates.js`)。 - **创建HTML模板**:在HTML文件中创建模板区域,例如`template.html`...
在本篇文章中,我们将深入探讨jQuery 3.0.0版本,包括它的核心特性、优化的min.js版本以及在实际项目中的应用。 一、jQuery 3.0.0的核心特性 1. 兼容性:jQuery 3.0.0对浏览器的兼容性进行了全面升级,支持现代...
总的来说,`jquery.color.js`是jQuery生态系统中的一个重要组成部分,它扩展了jQuery的动画功能,使得开发者能够更自由地操控元素的颜色变化,从而创造出更加吸引人的视觉效果。对于那些希望在不牺牲兼容性的前提下...
《jQuery倒计时插件:jquery.countdown.js的解析与应用》 在Web开发中,倒计时功能常用于各种应用场景,如活动预告、产品发布、考试倒计时等。jQuery作为一款广泛使用的JavaScript库,提供了丰富的插件来扩展其功能...