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模型繼承

回答

相關問題