Knockout JS模型继承

时间:2013-02-19 19:18:22

标签: javascript inheritance knockout.js

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

示例

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

5 个答案:

答案 0 :(得分:39)

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

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

在StandardItemModel

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

答案 1 :(得分:0)

我想你可以这样做:

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

答案 2 :(得分:0)

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

答案 3 :(得分:-1)

我做了类似的事情,经过了大量的试验和错误,但我让这个为我工作:

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

然后,您需要添加原型构造函数:

StandardModel.prototype = new ItemModel();

如果你想拥有常用方法,那么你需要使用原型将它们添加到基类中来添加它们,然后使用以下方法在更高级别中调用它们:

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

答案 4 :(得分:-1)

您可以使用.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,下划线等的类似方法)的优点是,您不是为了获取对其方法的引用而创建其他对象。