How to use the Observables monitoring properties in Knockout.Js
This article mainly introduces how to use the Observables monitoring attributes in Knockout.Js, which has a certain reference value. Interested friends can refer to it. I hope you can learn a lot after reading this article.
Observables Monitoring Properties in Knockout.Js
One of the important features of KO is that it automatically updates your interface when your view model changes. How does KO know when your view model part changes? The answer is: you need to declare your model property as observable because it is a very special JavaScript objects that notifies subscribers of its changes and automatically detects relevant dependencies.
Var myViewModel = {
PersonName: ko.observable ('aehyok')
PersonAge: ko.observable (25)
}
You don't need to modify view at all-all data-bind syntax still works, except that it can monitor the change, and view will update automatically when the value changes.
Monitor the read operation of attributes (read)
/ / read operation of monitoring attributes (read)
Alert (myViewModel.personAge)
Monitor the write operation of attributes (write)
/ / Monitor the write operation of attributes (write)
MyViewModel.personName ("aehyok-Test")
Dependent Observables dependency monitoring properties
What if you already have the monitoring properties firstName and lastName, and you want to display the full name? This requires the use of dependency monitoring properties-these functions are one or more monitoring properties, and if their dependency object changes, they will automatically change.
For example: continue to add two properties, firstName and lastName, to the above ViewModel
Var myViewModel = {
PersonName: ko.observable ('aehyok')
PersonAge: ko.observable (25)
FirstName: ko.observable ('aehyok')
LastName: ko.observable ('Leo')
}
And add a dependency monitoring property to return the full name of the name
/ / dependent monitoring properties
MyViewModel.fullName = ko.dependentObservable (function () {
Return this.firstName () + "+ this.lastName ()
}, myViewModel)
And bind to elements on the View view interface
The fullname is
Thank you for reading this article carefully. I hope the article "how to use Observables Monitoring attributes in Knockout.Js" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
