Knockout.js 学习 (四)-- 创建数据模型和监控属性(下)

上面,你已经看到如何创建一个基本的数据模型以及如何利用绑定来显示它的属性。但是KO最重要的一个属性就是当View Model发生变化时能够自动的更新UI界面。KO是如何能够知道你的View Model已经发生改变了呢?答案是:你需要将你的model属性声明成observable的, 因为它是非常特殊的JavaScript 对象,能够通知用户它的改变以及自动检测依赖关系。

例如:重写上述例子中的View Model为以下代码:

image

你根本不需要对View进行更改,所有的data-bind语法依然正常工作。所不同的是,现在它能够自动检测变化,并通知它自动更新界面(View)。

Reading and writing observables

并不是所有的浏览器都支持JavaScript的getters and setters (比如IE),所以,为了兼容,ko.observable监控的对象都是方法。

1、读取当前监控的属性值,只需要直接调用observable(不需要参数),在这个例子当中,调用myViewModel.personName()将会返回'Bob',调用myViewModel.personAge() 将会返回'123'

2、写一个新值到监控属性上,调用observable方法,将要写的值作为一个参数传入即可。例如,调用myViewModel.personName('Mary') 将会把名称改变成 'Mary'。

3、一次性改变Model对象监控的多个属性值,你可以使用链式方法。例如:myViewModel.personName('Mary').personAge(50) 将会把名称改变成'Mary'将年龄设置为 50.

监控属性最重要的一点就是可以随时监控,也就是说,其他代码可以告诉它哪些是需要通知发生变化的。这就是为什么KO会有如此多的内置绑定语法。所以,当你在页面中编写data-bind="text: personName",text 会绑定注册到自身,当personName发生变化时,它能够立即得到通知。

当你通过调用 myViewModel.personName('Mary') 将名称的值改变成为'Mary'时,text绑定会自动更新新值到其对应的DOM对象元素上,这就是为什么改变数据模型能够自动刷新View页面。

 

监控属性的显示订阅

通常情况下,你不需要手工订阅,所以初学者可以跳过这一节。

对于高级用户,如果你想要注册自己的订阅来通知监控属性的变化,你可以使用subscribe 方法。例如:

image

方法在KO内部很多地方都有用到。你也可以终止自己的订阅:首先获取到这个订阅,然后调用dispose 方法即可。例如:

image

大多数时间,你不需要这么做,因为内置的绑定和模版系统功能在管理订阅上已经做了很多工作。

转载于:https://www.cnblogs.com/fwyTech/articles/3429569.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值