Knockout JS模型继承

我在我的应用程序中有三个相对类似的挖空模型，我想扩展一个基本模型来组合共同的属性，而不是重复三次自己。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作为一个基类，只是根据需要添加额外的属性。

来源

2013-02-19 BillPull

好的，但你的问题是什么？在创建基类期间你有什么问题？ – nemesv 2013-02-19 19:19:23

我的问题是什么是最好的方法来做到这一点在JavaScript中，如果淘汰赛提供了一些实用工具来简化它。 – BillPull 2013-02-19 19:20:29

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

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

的StandardItemModel

像这里面：http://jsfiddle.net/marceloandrader/bhEQ6/

来源

2013-02-19 21:44:47

太容易了，谢谢！ – Homer 2013-05-07 18:33:35

+1小提琴示例 – 2013-10-21 10:50:26

它不会将ko.computed属性与ko.observable一起扩展吗？ – 2016-10-05 18:51:39

-1

我做过类似的东西，有很多试验和错误的，但我得到这个工作对我来说：

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

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

StandardModel.prototype = new ItemModel();

如果您想要使用常用方法，那么您需要使用原型将它们添加到基类中以添加它们，然后使用以下名称在更高级别中调用它们：

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

来源

2013-02-19 19:24:22

仅仅为了设置继承而创建一个实例是不好的。这里有一篇文章解释了为什么以及如何修复它http://js-bits.blogspot.com/2010/08/javascript-inheritance-done-right.html – 2013-02-19 19:38:56

谢谢！在阅读时，我曾经看过类似的代码（以及许多其他实现），但没有一个解释得足够好让我留意。 – 2013-02-20 08:55:56

我想你可以做这样的事情：

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

来源

2013-02-19 19:36:17 davs

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

来源

2014-11-20 05:35:40

-1

您可以链的构造函数调用使用.CALL或。适用

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的类似的方法，下划线等），是你没有创建一个额外的对象只是抢参考其方法。

来源

2016-02-04 01:45:35

Knockout JS模型继承

回答

相关问题