Question

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);

Answer 1

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);
            }