JQuery模板：(九) JsRender之JsViews中的JsObserverable

Josh_Persistence

浏览: 1654283 次
性别:
来自: 上海

最近访客更多访客>>

reshinder

maxuanzhao

yh4s

依然任逍遥

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery

JsRender JsViews JsObservable template data-binding

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

wsheng-jstemplate.zip (150.7 KB)
下载次数: 12

0
顶

0
踩

分享到：

maven-dependency-plugin is not supporte ... | JQuery模板：(八) JsRender中的转换器 ...

2013-07-31 21:57
浏览 3809
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论