Knockout.Js中的Observables监控属性怎么用

Knockout.Js中的Observables监控属性怎么用

这篇文章主要介绍了Knockout.Js中的Observables监控属性怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

Knockout.Js中的Observables监控属性

Knockout.Js中的Observables监控属性怎么用

KO一个重要的功能是当你的view model改变的时候能自动更新你的界面。当你的view model部分改变的时候KO是如何知道的呢?答案是:你需要将你的model属性声明成observable的, 因为它是非常特殊的JavaScript objects,能够通知订阅者它的改变以及自动探测到相关的依赖。

var myViewModel = {

personName: ko.observable('aehyok'),

personAge: ko.observable(25)

};

你根本不需要修改view – 所有的data-bind语法依然工作,不同的是他能监控到变化,当值改变时,view会自动更新。

监控属性的读操作(read)

///监控属性的读操作(read)

alert(myViewModel.personAge);

监控属性的写操作(write)

///监控属性的写操作(write)

myViewModel.personName("aehyok-Test");

Dependent Observables依赖监控属性

如果你已经有了监控属性firstName和lastName,你想显示全称怎么办? 这就需要用到依赖监控属性了 – 这些函数是一个或多个监控属性, 如果他们的依赖对象改变,他们会自动跟着改变。

例如:继续在上面的ViewModel中添加两个属性 firstName和lastName

var myViewModel = {

personName: ko.observable('aehyok'),

personAge: ko.observable(25),

firstName: ko.observable('aehyok'),

lastName: ko.observable('Leo')

};

并且添加一个依赖监控属性,来返回姓名的全称

///依赖监控属性

myViewModel.fullName = ko.dependentObservable(function () {

return this.firstName() + " " + this.lastName();

}, myViewModel);

并且绑定到View视图界面上的元素

The fullname is <span data-bind="text: fullName"></span>

感谢你能够认真阅读完这篇文章,希望小编分享的“Knockout.Js中的Observables监控属性怎么用”这篇文章对大家有帮助,同时也希望大家多多支持恰卡编程网,关注恰卡编程网行业资讯频道,更多相关知识等着你来学习!

发布于 2022-03-03 21:32:42
收藏
分享
海报
0 条评论
37
上一篇:html中body的属性有哪些 下一篇:css中overflow-x属性样式是什么
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码