淘汰JS模型继承

Knockout JS Model Inheritance

本文关键字：继承 模型 JS 淘汰      更新时间：2023-09-26

我的应用程序中有三个相对相似的淘汰模型，我想扩展一个基本模型来组合公共属性，而不是重复三次。

示例

var ItemModel = function (item) {
  var self = this;
  self.order = ko.observable(item.order);
  self.title = ko.observable(item.title);
  self.price = ko.observable(item.price);
  self.type = ko.observable(item.type);
};
var StandardItemModel = function (item, cartItemTypes) {
  var self = this;
  self.order = ko.observable(item.order);
  self.title = ko.observable(item.title);
  self.price = ko.observable(item.price);
  self.type = ko.observable(item.type);
  self.isInCart = ko.computed(function () {
    return cartItemTypes().indexOf(item.type) > -1;
  }, self);
  self.itemClass = ko.computed(function () {
     return self.isInCart() ? "icon-check" : "icon-check-empty";
  }, self);
};
var CustomItemModel = function (item) {
  var self = this;
  self.order = ko.observable(item.order);
  self.title = ko.observable(item.title);
  self.price = ko.observable(item.price);
  self.type = ko.observable(item.type);
  self.icon = item.icon;
};

我想使用ItemModel作为基类，并根据需要添加额外的属性。

我认为你可以像这个一样使用ko.utils.extend

ko.utils.extend(self, new ItemModel(item));

在StandardItemModel 内部

像这样：http://jsfiddle.net/marceloandrader/bhEQ6/

我想你可以这样做：

var StandardItemModel = function (item, cartItemTypes) {
var self = this;
self.standard = new ItemModel(item);
self.isInCart = ko.computed(function () {
return cartItemTypes().indexOf(item.type) > -1;
}, self);
self.itemClass = ko.computed(function () {
 return self.isInCart() ? "icon-check" : "icon-check-empty";
 }, self);
}

您可以使用.call或.apply链接构造函数调用

function ItemModel (item) {
    var self = this;
    self.order = ko.observable(item.order);
    self.title = ko.observable(item.title);
    self.price = ko.observable(item.price);
    self.type = ko.observable(item.type);
}
function StandardItemModel(item, cartItemTypes) {
    var self = this;
    ItemModel.call(this, item);
    self.isInCart = ko.computed(function () {
        return cartItemTypes().indexOf(item.type) > -1;
    }, self);
    self.itemClass = ko.computed(function () {
        return self.isInCart() ? "icon-check" : "icon-check-empty";
    }, self);
}
function CustomItemModel (item) {
    var self = this;
    ItemModel.apply(this, [item]);
    self.icon = item.icon;
}

与ko.utils.extend（或jQuery、underline等中的类似方法）相比，优势在于您创建的附加对象不只是为了获取对其方法的引用。

function MyBaseType() {
    var self = this;
    self.Id = 1
}
function MyComplexType() {
    var self = this;
    //Extending this class from MyBaseType
    ko.utils.extend(self, new MyBaseType());
    self.Name = 'Faisal';
    self.MyComplexSubType = new MyComplexSubType();
}
function MyComplexSubType() {
    var self = this;
    self.Age = 26;
}

JSFIDDLE示例

我也做过类似的事情，经过了很多尝试和错误，但我做到了这一点：

var StandardItemModel = function (item, cartItemTypes) {
    var self = this;
    ItemModel.call(self, item)
}

然后，您需要添加一个原型构造函数：

StandardModel.prototype = new ItemModel();

如果你想拥有通用的方法，那么你需要使用prototype将它们添加到基类中，然后使用在更高的类中调用它们

ItemModel.prototype.methodName.call(self, parameters);
相关文章：