ko.dependentObservable inside viewModel?

Question

I m new to Knowckout.js and have done this demo.

http://jsfiddle.net/Yawer/7QXCN/#&togetherjs=Aunph9nuxf

In this implementation dependentobervable is out side viewModel. My question is, is there a way fullname which is a dependentObservable can come inside viewModel just like name and other properties ?

Below is my code:

$(function(){

var viewModel={
    name: ko.observable("Biala"),
    changedName: function(){
    this.name("Hussain");
},
    nvtoggle: ko.observable(true)

};

viewModel.fullName= ko.dependentObservable(function(){
    return this.name() + " is " + (this.nvtoggle() ? " " : " not ") + "visible";
},viewModel);

    ko.applyBindings(viewModel);

});

Not really, if you are using object literals as your view model... but why is it a problem if the fullName is "outside"? See also this question: http://stackoverflow.com/questions/9589419/difference-between-knockout-view-models-declared-as-object-literals-vs-functions — nemesv, Jun 02 '14 at 12:40
@nemesv its not a problem, as I m new to knockout, this stuck in mind, why it need to have out side of class, as it is sort of calculated property, why not it is inside class ? — haansi, Jun 02 '14 at 12:43
Also note that `dependant observables` are now `computed observables` http://knockoutjs.com/documentation/dependentObservables.html — GôTô, Jun 02 '14 at 12:43
@haansi in this case the linked question should also answer yours? Or is something still not clear? — nemesv, Jun 02 '14 at 12:48

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Yes, it is very possible to put the dependantObservable into the viewmodel :)

Please see the code below and attached jsfiddle - http://jsfiddle.net/B6AtE/1/.

A few things to note:

I have changed your dependantObservable to a computed, as this is what they are now called.
I have changed your viewmodel to be a function and have moved it outside of your ready function. This is just to be tidy - it works fine if you leave it all in the ready function.
I have added var self = this; at the beginning of the viewmodel. This has no functional effect in this case, but is a good idea to do this in your viewmodels. After adding it in, you can use self within that viewmodel and be certain that you are in the right context.

Please let me know if you have any other questions about the changes that I have made.

var viewModel = function() {

var self = this;
self.name = ko.observable("Biala");
self.changedName = function() {
    self.name("Hussain");
};
self.nvtoggle = ko.observable(true);

self.fullName = ko.computed(function() {
    return self.name() + " is " + (self.nvtoggle() ? " " : " not ") + "visible";
});

};

$(function(){

var vm = new viewModel();                                
ko.applyBindings(vm);

});

thanks, well written code with really nice explanation. Just a small thing please. var self=this; is representing this keyword right ? It means instead of self I can use this in all places right ? — haansi, Jun 02 '14 at 23:09
Almost - it's the other way around. The problem with just using `this` is that it refers to the current scope. For example, if you called `this.name = ko.observable("Biala");`, the `this` in this case refers to the viewmodel. But if you call `return this.name()` inside the computed, `this` refers to **the computed**. If you write `var self = this;` at the beginning, you can always use `self` and be certain that you are referring to the viewmodel. There is a good explaination on the Knockout site, under "Managing This" - http://knockoutjs.com/documentation/computedObservables.html — Josh Lowry, Jun 03 '14 at 01:09

ko.dependentObservable inside viewModel?

1 Answers1