Access ViewModel Property in ko.utils.extend

Question

I have a viewModel.

  var Vm = function() {
        var self = this;
        self.severityList = ko.observableArray(ko.utils.parseJson('@Html.Raw(jsonData)'));
        self.deactivateSeverityLevel.bind(this);
    };
    ko.utils.extend(Vm.prototype, {
        deactivateSeverityLevel: function(item) {

        }
    });

I need to access the severityList inside the ko.utils.extend. I try to add Vm.severityList inside the .extend but it's not working..

Answer 1

you would access severity list using this.severityList inside of deactivateSeverityLevel.

Depending on where you call it from, you may need to use bind to ensure that this is correct.

If you are binding it within its own scope, then you are fine without a bind call like:

<button data-bind="click: deactivateSeverityLevel">Deactive</button>

If you are binding to a different scope (like $parent), then you would need to bind it. You could either do:

    <button data-bind="click: $parent.deactivateSeverityLevel.bind($parent)">Deactive</button>

or:

var Vm = function() {
    this.severityList = ko.observableArray(ko.utils.parseJson('@Html.Raw(jsonData)'));
    this.deactivateSeverityLevel = this.deactivateSeverityLevel.bind(this);
};

ko.utils.extend(Vm.prototype, {
    deactivateSeverityLevel: function(item) {
        //access this.severityList()
    }
});

In this last example, you are creating a bound version of the deactivateSeverityLevel function on the instance by binding the implementation from the prototype the current value of this.