jQuery Data Linking 对象与对象之间属性的关联

支持客户端的数据绑定


ASP.NET团队最近还向jQuery社区提交了被称为“data linking”的技术,Data Linking可以帮助你实现对象与对象之间属性的关联——当其中一方发生改变时另一方也随之改变。方便的实现页面中展现的数据与实际数据对象中的数据实时同步。

data linking与data-binding的理论很相近(我们之所以使用data linking这个名称是因为jQuery中已经包含bing()方法,尽管这个方法与数据绑定没有什么关系...)。

现在来看看data linking该如何使用。假设有一个页面,该页面上有两个<input>元素,如下所示:

然后,我们通过下面这段Javascript代码将这两个INPUT元素与一个叫做“contact”的Javascript对象的对应属性关联起来:

当这段代码执行时,contact对象的name属性值将做为第一个Input元素的值。同理,属性phone的值则会付给id为phone的第二个Input元素。这样一来,contact对象的属性与Input元素的映射关系也就建立起来了。

由于本例contact对象的属性绑定到了Input元素上,当你访问该页面,contact属性的值将会分别显示在两个文本框中:

而且当contact对象的属性值发生改变时,与该属性绑定的Input元素中的值也会自动的发生改变。

这样,我们便可以通过编程的方式,比如使用jQuery中的attr()方法来修改contact对象的属性值,如下所示:

这样关联的Input元素中的值也会自动的被更新(这里我们不需要做任何工作):

需要注意的是正如我们上面使用了jQuery中的attr()方法更新了contact对象的属性值。为了确保data linking的正常工作,必须使用jQuery中的方法来对属性值进行修改。

双向绑定

上面实现的是Javascript对象到HTML元素单向的数据绑定,要想实现双向的数据绑定,需使用linkBoth()方法。

比如,下面的代码为一button元素添加了客户端的Javascript单击处理事件。单击按钮后,弹出一警告窗口,并在窗口中显示contact对象的属性值:

下面演示了当修改了页面中Name输入框内的值并点击保存按钮后的情况。注意到输入框与contact对象中相应的属性值都发生了改变:

上面只是一个简单的演示,使用了Javascript警告弹窗来显示contact对象的属性值。试想我们也可以调用一个web-service来将对象保存到数据库中。这样做的好处是,它可以使你专注于你的数据,而不用为如何保持数据与UI显示同步而费心。

转换器

在data linking中我们还支持一种被称为converters(转换器)的特性。转换器可以轻松地在连接属性的值时进行数据转换。

假设我们希望contact对象的phone属性的值以纯数字的形式输出(不包含”—“或”()“)。在这种情况下,我们就可以通过构建转换器来将Input元素中的值转换成我们希望显示的样式:

注意上面转换器是如何转换绑定双方的值并传递给 linkFrom() 方法的。在将Input元素中的值同步到contact对象的phone属性中时,转换器自动过滤掉了数字以外的其它字符。也就是说,如果你在页面的Phone输入框内输入(206)555-9999,同步到contact对象的phone属性内的值将是2065559999:

上面演示的是去除格式,当然你也可以将转换器反过来使用。比如,定义一个电话号码格式的字符串,并将属性的值格式化后显示出来。

Templating与Data Linking技术的结合使用

我们希望通过采用Templating及Data Linking技术可以让开发人员更方便的使用jQuery来开发涉及数据显示与处理的网站项目。Templating 可以方便的将采用ajax异步方式获取的数据记录以期望的方式显示出来,Data linking则为我们解决了页面显示与对象属性的数据同步及更新的问题。

目前,我们正致力于实现一个data linking技术的扩展,以使其支持声明性的数据连接(Declarative data linking)。好让大家在使用模板技术显示数据时能更容易的使用data linking,以达到更好的开发体验。

比如,我们用如下这样一个模板来显示一个product对象数组:

注意{{link name}}与{{link price}}这两个表达式,它们使SPAN标签与product对象的属性关联了起来。目前,jQuert模板允许用户使用自定义的命令来对模板自带的数据同步方法进行扩展。这里,我们就使用一个叫做“link”的方法来扩展模板默认的数据同步功能。

上面的模板使用了data linking所带来的好处就是当“product”对象数据发生改变时页面上的SPAN标签显示的内容也会自动的进行同步并显示。声明性的数据连接也让我们能更方便的创建,编辑和插入表单。比如,使用声明性的数据连接,便可以通过下面的方式来创建一个表单以编辑“product”对象。

当你采用了模板技术及data linking进行了关联声明之后,当你修改了页面Input元素中的值时,与该元素相关联的Javascript对象的属性也会同步的发生改变。这样就免去了我们需要手工编写代码来进行对象与数据显示的同步工作的麻烦,这也有助于我们编写出更简洁的客户端代码。

(0)

相关推荐

  • jQuery Selectors(选择器)的使用(九、表单对象属性篇)

    本系列文章分为:基本篇.层次篇.简单篇.内容篇.可见性篇.属性篇.子元素篇.表单篇.表单对象属性篇共9篇文章. 本篇讲解::enabled,:disabled,:checked,:selected的用法. 您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com 由于是第一次写技术性系列文章,难免会出错或代码BUG,欢迎指出,在此谢过! 运行后,需要刷新下,加载下jquery jQuery-Selectors-9 .div { width:95%; margin-left:15px

  • JS将所有对象s的属性复制给对象r(原生js+jquery)

    原生写法: 复制代码 代码如下: /**   * 将所有 s 的属性复制给 r   * @param r {Object}   * @param s {Object}   * @param is_overwrite {Boolean} 如指定为 false ,则不覆盖已有的值,其它值   *   包括 undefined ,都表示 s 中的同名属性将覆盖 r 中的值   */  mix: function (r, s, is_overwrite) { //TODO:   if (!s || !r

  • 通过length属性判断jquery对象是否存在

    复制代码 代码如下: //jquery 通过得到对象的长度判断对象是否存在 function testJquery() { if ($(".tel").length > 0) { alert("存在"); } else { alert("不存在"); } }

  • jQuery对象的length属性用法实例

    本文实例讲述了jQuery对象的length属性用法.分享给大家供大家参考.具体分析如下: 此属性返回匹配的jQuery对象集合中对象的数目. length属性与size()方法返回相同的值. 语法结构: 复制代码 代码如下: $("selector").length 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <m

  • jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配

    指定元素中包含 id 属性的, 如: $("span[id]") 复制代码 代码如下: <span id="span1" name="S1">AAA</span><br/> <span id="span2" name="S2">BBB</span><br/> <span name="Sx3">CCC<

  • jquery 事件对象属性小结

    使用事件自然少不了事件对象.  因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象. jQuery中统一了事件对象,  当绑定事件处理函数时,  会将jQuery格式化后的事件对象作为唯一参数传入: $("#testDiv").bind("click", function(event) { }); 关于event对象的详细说明, 可以参考jQuery官方文档: http://docs.jquery.com/Events

  • jquery中event对象属性与方法小结

    JQuery读书笔记–Event属性说明 JQuery事件中的Event属性是经常性的被忽略的.大多数时间你的确不怎么用它,但有些时候它还是它还是有作用的.如获知触发时用户的环境(是否按了shift etc).每个浏览器对event都有不同的地方,Jquery对Event做了标准化所以可以放心用. * .target  这个反应触发事件的DOM对象,可以在事件冒泡的时候判断是否是事件源头(compare event.target to this) * .pageX:  鼠标的left属性,相对于

  • jQuery对象的selector属性用法实例

    本文实例讲述了jQuery对象的selector属性用法.分享给大家供大家参考.具体分析如下: 此属性返回传给jQuery的原始选择器,也就是说返回jQuery是用哪个选择器匹配到当前元素. selector属性可以与context配合使用,用于精确检测选择器查询情况. 语法结构: 复制代码 代码如下: $("selector").selector 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <

  • jQuery学习笔记 操作jQuery对象 属性处理

    元素的属性处理 方法 描述 attr(name) attr(name,value) attr(name,fn(index,value)) attr({name1:value1,-,nameN:valueN}) 获取某个属性的取值,或可以用于设置某个属性的值.还可以使用函数作为参数,将函数返回值作为需要为元素属性设置的值,比如将第(index+1)个元素的name属性设置为函数返回值(实际上,明白函数式就根本不需要这说明).也可以一次性给同一元素多个属性 removeAttr(name) 删除某个

  • Jquery 获取指定标签的对象及属性的设置与移除

    1.先讲讲JQuery的概念,JQuery首先是由一个 America 的叫什么 John Resig的人创建的,后来又很多的JS高手也加入了这个团队.其实 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用简单的一些代码实现一些复杂的JS效果. 2.JQuery实现了代码的分离,不用再网页中加入如:onclick之类的事件来调用函数了,直接引入JQuery类库和自己编写的JQuery代码就可以了: 如: 复制代码 代码如下: $(function(){

随机推荐