Knockout JS 模型继承答案

【问题标题】：Knockout JS Model InheritanceKnockout JS 模型继承
【发布时间】：2013-02-04 14:42:27
【问题描述】：

我的应用程序中有三个相对相似的剔除模型，我想扩展一个基本模型以组合通用属性，而不是重复三次。

例子

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 作为基类，并根据需要添加额外的属性。

【问题讨论】：

好的，但是你的问题是什么？在基类创建过程中遇到了什么问题？
我的问题是在 javascript 中执行此操作的最佳方法是什么，如果敲除提供了一些实用程序来简化它。

标签： javascript inheritance knockout.js

【解决方案1】：

我做过类似的事情，经过多次试验和错误，但我得到了这个为我工作：

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

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

StandardModel.prototype = new ItemModel();

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

ItemModel.prototype.methodName.call(self, parameters);

【讨论】：

创建一个实例只是为了设置继承是不好的。这是一篇解释为什么以及如何修复它的帖子js-bits.blogspot.com/2010/08/…
谢谢！我在阅读它时看到过类似的代码（以及许多其他实现），但没有一个能很好地解释它让我注意到。

【解决方案2】：

我猜你可以这样做：

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);
}

【讨论】：

【解决方案3】：

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

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

在 StandardItemModel 内

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

【讨论】：

它不扩展 ko.computed 属性和 ko.observable 属性吗？
@RajPawanGumdal 是的，它继承了一切jsfiddle.net/kpq3pwLc

【解决方案4】：

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 EXAMPLE

【讨论】：

【解决方案5】：

您可以使用 .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、下划线等的类似方法）的优势在于，您不会创建一个额外的对象来获取对其方法的引用。

【讨论】：