Knockoutjs 3.X API Third Chapter Computing Monitoring properties (4) Pure computed observables

Pure computed observables

The Pure computed observables is launched by KO in version 3.2.0. She has a lot of improvements over previous computedobservables:

• Prevent memory leaks
• Reduce computational overhead

In the purecomputed function, switch between the two states as the relevant monitoring attribute values change.

1. Whenever it does not 值变化的时候 , it is in a state of sleep . When it goes to sleep , it configures all subscriptions to its dependencies. In this state, it does not subscribe to any of the monitoring properties. If it is read, the return is also the value of the sleep state.

2. Whenever its value changes, it will be in the listening state . When it enters the listening state, it subscribes to all dependencies immediately. In this state, it works like a normal computational monitoring attribute.

Grammar:

Pure computed observables:

this. FullName = ko.purecomputed (function() {    returnthis this this);  

The equivalent of the original computed observables plus the pure parameter:

this. FullName = ko.computed (function() {    return this  This  thistrue });

Use pure computed observables

In an instance of a simple wizard interface, Pure computed observables is only bound to the view in the final step, so only updates when the step is valid.fullName

First Name:

Last Name:

Prefix:Hello,!

Next

UI Source code:

<Divclass= "Log"Data-bind= "Text:computedlog"></Div><!--ko if:step () = = 0 -    <P>First Name:<inputData-bind= "Textinput:firstname" /></P><!--/ko -<!--ko if:step () = = 1 -    <P>Last Name:<inputData-bind= "Textinput:lastname" /></P><!--/ko -<!--ko if:step () = = 2 -    <Div>Prefix:<SelectData-bind= "Value:prefix, options: [' Mr. ', ' Ms. ', ' Mrs. ', ' Dr. ']"></Select></Div>    <H2>Hello,<spanData-bind= "Text:fullname"> </span>!</H2><!--/ko -<P><Buttontype= "button"Data-bind= "Click:next">Next</Button></P>

View Model Source code:

functionAppData () { This. FirstName = ko.observable (' John ');  This. LastName = ko.observable (' Burns ');  This. prefix = ko.observable (' Dr. ');  This. Computedlog = ko.observable (' Log: ');  This. FullName = ko.purecomputed (function () {        varValue = This. prefix () + "" + This. FirstName () + "" + This. LastName (); //Normally, should avoid writing to observables within a pure computed        //observable (avoiding side effects). But this example was meant to demonstrate        //Its internal workings, and writing a log is a good a-to-do.         This. Computedlog ( This. Computedlog.peek () + value + '; ‘); returnvalue; },  This);  This. Step = ko.observable (0);  This. Next =function () {         This. Step ( This. Step () = = 2? 0: This. Step () +1); };}; Ko.applybindings (NewAppData ());

Determine if a property is pure computed observables

KO provides the ko.ispurecomputed function to help determine if the monitoring properties are pure computed observables.

var result =function  (name, value) {    if (!ko.iscomputed (value) | | ko.ispurecomputed (value)) {        = value;    }});

Knockoutjs 3.X API Third Chapter Computing Monitoring properties (4) Pure computed observables