`
Josh_Persistence
  • 浏览: 1649979 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类

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.
 

 

 

0
0
分享到:
评论

相关推荐

    JQuery模板 :(六)JsViews - 基于JsRender并具有动态绑定功能的模板

    在项目中引入JsViews,通常需要同时引入`jsrender.js`和`jsviews.js`两个文件。这两个文件分别提供了模板引擎和数据绑定功能。 **3. 数据绑定概念** JsViews 引入了双向数据绑定的概念,这意味着视图的改变会同步到...

    jQuery模板 :(二) JSRender之内置的模板标签

    **jQuery 模板:JSRender 内置的模板标签** 在Web开发中,模板引擎是一种强大的工具,它允许我们分离数据和视图,使代码更易于维护和扩展。jQuery的一个扩展,JSRender,是一个轻量级但功能强大的模板库,提供了...

    jquery-jsrender.js

    1. **简洁的语法**:JSRender 使用类似于 Handlebars 或 Mustache 的双大括号语法 (`{{ }}`),使得模板代码易于阅读和编写。例如,`{{:name}}` 用于输出变量 `name` 的值。 2. **数据绑定**:通过模板表达式,你...

    JsRender.zip(jsrender.js和jsrender.min.js合集)

    6. **递归模板**:JsRender 支持递归模板,这意味着可以在模板中嵌套使用同一个模板,这对于处理层次结构的数据非常有用。 7. **双向数据绑定**:尽管JsRender 主要是为单向数据绑定设计的,但它可以通过配合...

    jquery-jsrender.js 下载

    `jQuery JSRender` 是一款高效且功能强大的JavaScript模板引擎,它是jQuery插件家族的一员,专为构建动态数据驱动的Web界面而设计。该库允许开发者通过简洁易读的语法创建复杂的HTML模板,从而在不涉及大量DOM操作的...

    jsviews:基于JsRender模板构建的交互式数据驱动视图,MVVM和MVP

    MVVM的功能,JavaScript的灵活性,JsRender模板和jQuery的速度和便捷性 JsViews建立在模板之上,并添加了数据绑定和,从而提供了完整的MVVM平台,可轻松创建交互式数据驱动的单页应用程序和网站。 文档和下载 可在上...

    JsRender 的使用demo

    2. **数据绑定**: JsRender 提供了强大的数据绑定能力,允许在模板中直接访问和操作数据模型,无需额外的绑定层。 3. **标签语法**: 除了基本的表达式输出,JsRender 还支持自定义标签,如 `{{for}}`(循环)、`{{...

    jsrender.js

    JSRender允许创建自定义标签,这使得在模板中可以扩展功能。自定义标签可以通过注册`$.fn.renderTag`来实现。 **5. 助手函数** JSRender提供了内置的助手函数,如`{{formatDate}}`,可以对数据进行格式化处理。...

    jsrender:轻巧,功能强大且高度可扩展的模板引擎。 在浏览器中或在带有或不带有jQuery的Node.js上

    JsRender用于将数据驱动的模板渲染为字符串,以准备插入DOM中。 平台也使用它,它向JsRender模板添加了数据绑定,并提供了完整的MVVM平台,可轻松创建交互式数据驱动的单页应用程序和网站。 JsRender安装 jsrender...

    自编博客技术栈:页面:H5+CSS3+JS+jQuery渲染模板:艺术模板后端-节点.js .zip

    自编博客技术栈:页面:H5+CSS3+JS+jQuery渲染模板:艺术模板后端-节点.js

    jquery.color.js

    而jQuery.color.js是jQuery的一个扩展插件,它为jQuery对象添加了对颜色操作的支持,使得在网页动态效果中处理颜色变得更加简单。本文将深入探讨这个插件的核心功能、使用方法以及在实际开发中的应用。 首先,我们...

    跨年烟花代码 jquery.fireworks.js 插件描述:jquery-fireworks.js是一款基于HTML5 Ca

    jquery.fireworks.js 插件描述:jquery-fireworks.js是一款基于HTML5 Canvas的逼真烟花特效jQuery插件。该插件使用简单,并可自由进行配置。它可以在一个div容器中生成逼真的燃放...

    jquery.media.js.zip

    今天我们要探讨的是一个基于jQuery的插件——jQuery.media.js,它为网页中的多媒体内容展示提供了丰富的支持。本文将深入解析jQuery.media.js的核心原理,并分享其在实际项目中的应用技巧。 一、jQuery.media.js...

    js生成二维码jquery.qrcode.js

    在描述中提到的`jquery.qrcode.js`,就是将jQuery与二维码生成功能结合的插件。这个插件允许你在HTML元素上直接绘制二维码,无需任何服务器端的支持,大大简化了开发流程。使用这个插件,你可以通过指定一些参数,如...

    jquery.cookie.js,jquery.min.js

    在压缩包中,我们有两个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开发的javascript模板引擎-jTemplates

    - **引入jQuery和jTemplates库**:首先需要在页面中引入jQuery库(如`jquery-1.2.6.pack.js`)和jTemplates插件(如`jquery-jtemplates.js`)。 - **创建HTML模板**:在HTML文件中创建模板区域,例如`template.html`...

    jquery-3.0.0.js 、jquery-3.0.0.min.js 【官方jquery包 js】

    在本篇文章中,我们将深入探讨jQuery 3.0.0版本,包括它的核心特性、优化的min.js版本以及在实际项目中的应用。 一、jQuery 3.0.0的核心特性 1. 兼容性:jQuery 3.0.0对浏览器的兼容性进行了全面升级,支持现代...

    JQuery颜色渐变插件jquery.color.js

    总的来说,`jquery.color.js`是jQuery生态系统中的一个重要组成部分,它扩展了jQuery的动画功能,使得开发者能够更自由地操控元素的颜色变化,从而创造出更加吸引人的视觉效果。对于那些希望在不牺牲兼容性的前提下...

    jquery.countdown.js自定义倒计时代码.zip

    《jQuery倒计时插件:jquery.countdown.js的解析与应用》 在Web开发中,倒计时功能常用于各种应用场景,如活动预告、产品发布、考试倒计时等。jQuery作为一款广泛使用的JavaScript库,提供了丰富的插件来扩展其功能...

Global site tag (gtag.js) - Google Analytics