Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
358 views
in Technique[技术] by (71.8m points)

knockout.js - Knockout: computed observable vs function

When using knockout, what is the advantage of using read-only computed observables rather than simple functions?

Take the following viewmodel constructor and html snippet, for example: ?

var ViewModel = function(){
    var self = this;
    self.someProperty = ko.observable("abc");
    self.anotherProperty = ko.observable("xyz");
    self.someComputedProperty = function(){
        return self.someProperty() + self.anotherProperty();
    };    
};

<input data-bind="value: someProperty"/>
<input data-bind="value: anotherProperty"/>
<p data-bind="text: someComputedProperty()"></p>

Everything here seems to work as you'd expect, so is there a reason why I should instead use:

?var ViewModel = function(){
    var self = this;
    self.someProperty = ko.observable("abc");
    self.anotherProperty = ko.observable("xyz");
    self.someComputedProperty = ko.computed(function(){
        return self.someProperty() + self.anotherProperty();
    });    
};


<input data-bind="value: someProperty"/>
<input data-bind="value: anotherProperty"/>
<p data-bind="text: someComputedProperty"></p>

I notice that the documentation at http://knockoutjs.com/documentation/computedObservables.html states that "...declarative bindings are simply implemented as computed observables", so does that mean there's need for me to use them explicitly in my viewmodels?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

If the only purpose of your computed observable is to do a simple binding against it, then using a function would be equivalent. Bindings are implemented inside of a computed observable to track the dependencies, so it will re-trigger your binding when any of the observables change.

Here are a few things to consider about computed observables vs. a function

  • the value of a computed observable is cached, so it is only updated when it is created and when a dependency is updated. For a regular function, you would need to execute the logic each time. If many things depend on that value (say each item in a collection is binding against a value from the parent), then this logic will be getting run again and again.

  • in your JavaScript, you are also free to use computed observables like you would other observables. This means that you can create manual subscriptions against them and depend on them from other computeds (calling a function would also create this dependency). You can rely on the normal utility methods in KO like ko.utils.unwrapObservable to generically determine if you need to call it as a function or not to retrieve the value.

  • if ultimately you want to ship the value to the server, a computed observable will naturally appear in your JSON output, while a value that is the result of a normal function will just disappear when converted to JSON (you would have to do more work to populate a property from that function first).


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...