Dependent observables with two view models?

I am working with the wonderful Knockout.js library开发者_运维百科. I am using javascript classes to capture the structure. For example, one of several classes is:

function OverridableFormItemText(defaultId, defaultText, defaultHelpText, overrideId, overrideText, overrideHelpText)
{
    this.DefaultFormItemTextId = ko.observable(defaultId);
    this.DefaultText = ko.observable(defaultText);
    this.DefaultHelpText = ko.observable(defaultHelpText);
    this.OverrideFormItemTextId = ko.observable(overrideId); 
    this.OverrideText = ko.observable(overrideText); 
    this.OverrideHelpText = ko.observable(overrideHelpText); 
}

If I have two view models in the page and want to add a dependent observable property to my class OverridableFormItemText, then do I need to do this twice due to the requirement to pass to view model to the function?

viewModel1.OverridableFormItemText.SomeDependentProperty = ko.dependentObservable(function() {
    return this.DefaultText() + " " + this.OverrideText();
}, viewModel1);

viewModel2.OverridableFormItemText.SomeDependentProperty = ko.dependentObservable(function() {
    return this.DefaultText() + " " + this.OverrideText();
}, viewModel2);

---

Yes, but you could make it more maintainable with the DRY principle, have a look at this example with the following view:

<p>First name: <span data-bind="text:  viewModel2.firstName"></span></p>
<p>Last name: <span data-bind="text:  viewModel2.lastName"></span></p>
<h2>Hello, <input data-bind="value:  viewModel2.fullName  "/>!</h2>

<p>First name: <span data-bind="text: viewModel.firstName"></span></p>
<p>Last name: <span data-bind="text:  viewModel.lastName"></span></p>
<h2>Hello, <input data-bind="value:  viewModel.myFullName  "/>!</h2> 

And this code:

var viewModel = {
    firstName: ko.observable("Planet"),
    lastName: ko.observable("Earth")
};

var viewModel2 = {
    firstName: ko.observable("Exoplanet"),
    lastName: ko.observable("Earth")
};

function FullNameDependentObservable(viewmodel, f, property) {
    viewmodel[property] = ko.dependentObservable(f, viewmodel);
}

var AddNames = function() {
    return this.firstName() + " " + this.lastName();
};

FullNameDependentObservable(viewModel, AddNames, "myFullName");
FullNameDependentObservable(viewModel2, AddNames, "fullName");

ko.applyBindings(viewModel);
ko.applyBindings(viewModel2);

---

OP here. Found that if you use classes as above, you can refer to 'this' when creating a dependent property, so this means I don't need to define the dependent property for each view model:

            function OverridableFormItemText(defaultId, defaultText, defaultHelpText, overrideId, overrideText, overrideHelpText)
            {

                this.DefaultFormItemTextId = ko.observable(defaultId);
                this.DefaultText = ko.observable(defaultText);
                this.DefaultHelpText = ko.observable(defaultHelpText);
                this.OverrideFormItemTextId = ko.observable(overrideId); 
                this.OverrideText = ko.observable(overrideText); 
                this.OverrideHelpText = ko.observable(overrideHelpText); 
                this.SomeDependentProperty = ko.dependentObservable(function() { return ('Dependent' + this.DefaultText() )}, this);
            }