扩展基类属性

Extending base-class properties

本文关键字：属性 基类 扩展      更新时间：2023-09-26

如何从knockout.js中的基类扩展属性？

我试图在我的视图模型中设置敲除验证，但除非我的"子类"有一个也是extended的可观察对象，否则它不会起作用。请参阅下面代码片段中的注释：

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

执行继承的推荐方法是使用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);
}

下面我使用extend为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/

相关文章：