扩展基类属性

Question

How do I extend properties from a base 'class' in knockout.js?

I'm trying to setup knockout-validation in my view models but it doesn't work unless my 'sub-class' has an observable that is also extended . See the comments in the code snippet below:

 // setup knockout validation ko.validation.rules.pattern.message = 'Invalid.'; ko.validation.configure({ registerExtenders: true, messagesOnModified: true, insertMessages: true }); // base 'class' function userAddressModelBase(data) { var self = this; self.firstName = ko.observable(data.firstName); self.lastName = ko.observable(data.lastName); } userAddressModel.prototype = new userAddressModelBase({}); userAddressModel.constructor = userAddressModel; // 'sub-class' function userAddressModel(data) { var self = this; userAddressModelBase.call(self, data); // extend 'base-class' properties; this doesn't work unless the current 'sub-class' also has an observable who is also extended... self.firstName.extend({ required: true }); self.lastName.extend({ required: true }); // the above statement only starts working if I extend an observable from this `sub-class` self.city = ko.observable();//.extend({ required: true }); self.errors = ko.validation.group(self); self.validate = function() { console.log(self.errors().length); if (self.errors().length > 0) { self.errors.showAllMessages(); return; } }; } var model = new userAddressModel({ firstName: "Ted" }); ko.applyBindings(model); 

 .validationMessage{ color: #ea033d; font-weight: 700; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div> <label>First Name: <input type="text" data-bind="value: firstName" /></label><br> <label>Last Name: <input type="text" data-bind="value: lastName" /></label><br> <label>City: <input type="text" data-bind="value: city" /></label><br> <button data-bind="click: validate">Validate</button> </div> 

Answer 1

The recommended way to perform inheritance is to use ko.utils.extend(self, new userAddressModelBase(data));

function userAddressModelBase(data) {
    var self = this;

    self.firstName = ko.observable(data.firstName);
    self.lastName = ko.observable(data.lastName);
}

Below I am using extend to add required validation to firstName and lastName.

function userAddressModel(data) {
    var self = this;

    ko.utils.extend(self, new userAddressModelBase(data))
    self.firstName.extend({ required: true });
    self.lastName.extend({ required: true });
};

Now in the example if you remove the firstName and then exit the text box you can see that the required message appears.

http://jsfiddle.net/d4vLqkx2/1/