擴展基類屬性

Question

如何在敲除js的基礎“類”中擴展屬性？

我試圖在我的視圖模型中設置敲除驗證，但是除非我的“子類”具有可extended的Observable，否則它將無法正常工作。 請參見下面的代碼片段中的注釋：

 // 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

推薦的執行繼承的方法是使用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);
}

下面，我使用擴展將所需的驗證添加到firstName和lastName。

function userAddressModel(data) {
    var self = this;

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

現在，在示例中，如果刪除了firstName，然后退出了文本框，則可以看到出現了所需的消息。

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