I have three relatively similar knockout models in my application and I would like to extend a base model to combine common properties rather than repeat myself three times.
example
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;
};
I would like to use ItemModel as a base class and just add the extra properties as necessary.
I think you can use ko.utils.extend like this
ko.utils.extend(self, new ItemModel(item));
inside the StandardItemModel
like this: http://jsfiddle.net/marceloandrader/bhEQ6/
I guess you can do something like this:
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);
}
You can chain constructor calls using .call or .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;
}
The advantage over ko.utils.extend (or similar methods from jQuery, underscore, etc) is that you are not creating an additional object just to grab references to its methods.
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
I've done something similar, with a lot of trial and error, but I got this to work for me:
var StandardItemModel = function (item, cartItemTypes) {
var self = this;
ItemModel.call(self, item)
}
You then need to add a prototyped constructor:
StandardModel.prototype = new ItemModel();
If you want to have common methods, then you need to add them to the base classes using prototype to add them, then call them in the higher class using:
ItemModel.prototype.methodName.call(self, parameters);
Related
I have some javascript code which looks like this - it's very repetitive, and as you can see follows a very defined pattern:
var AttachmentBuilder = function(){
this.attachment = {};
}
AttachmentBuilder.prototype.text = function(value){
this.attachment.text = value;
return this;
}
AttachmentBuilder.prototype.fallback = function(value){
this.attachment.fallback = value;
return this;
}
AttachmentBuilder.prototype.color = function(value){
this.attachment.color = value;
return this;
}
I had the idea to refactor this like:
var AttachmentBuilder = function(){
this.attachment = {};
}
passThrough(AttachmentBuilder.prototype,"attachment","text");
passThrough(AttachmentBuilder.prototype,"attachment","fallback");
passThrough(AttachmentBuilder.prototype,"attachment","color");
function passThrough(obj, apply, name){
obj[name] = function(param){
this[apply][name] = param;
}
return this;
}
But the context of this is not correct, and it does not behave like the long-hand version.
Below is a working example demoing the working and not working versions.
var AttachmentBuilder_Original = function(){
this.attachment = {};
}
AttachmentBuilder_Original.prototype.text = function(value){
this.attachment.text = value;
return this;
}
AttachmentBuilder_Original.prototype.fallback = function(value){
this.attachment.fallback = value;
return this;
}
AttachmentBuilder_Original.prototype.color = function(value){
this.attachment.color = value;
return this;
}
var original = new AttachmentBuilder_Original();
original.text("Text").color("Red").fallback("Fallback");
console.log("original",original.attachment);
/* ------------------------------------- */
var AttachmentBuilder_New = function(){
this.attachment = {};
}
passThrough(AttachmentBuilder_New.prototype,"attachment","text");
passThrough(AttachmentBuilder_New.prototype,"attachment","fallback");
passThrough(AttachmentBuilder_New.prototype,"attachment","color");
function passThrough(obj, apply, name){
obj[name] = function(param){
this[apply][name] = param;
}
return this;
}
var adjusted = new AttachmentBuilder_New();
adjusted.text("Text").color("Red").fallback("Fallback");
console.log("adjusted",adjusted.attachment);
I'm also interested if there is a more ES6-like way of solving this same issue of repetition.
Your higher order function looks good. Probably simple mistake of putting return statement in the wrong place.
function passThrough(obj, apply, name){
obj[name] = function(param){
this[apply][name] = param;
return this;
} //^^^^^^^^^^^^
}
Your solution should work, if you do this modification.
var AttachmentBuilder = function(){
this.attachment = {};
}
passThrough(AttachmentBuilder.prototype,"attachment","text");
passThrough(AttachmentBuilder.prototype,"attachment","fallback");
passThrough(AttachmentBuilder.prototype,"attachment","color");
function passThrough(obj, apply, name){
obj[name] = function(param){
this[apply][name] = param;
return this;//<---move return this here
}
//return this;
}
We are using a oop architecture as the following, and we have a scope problem. We have the 'self' variable for saving the context, but when we call the function 'print' in the overridden class, we are using the 'self' variable instead of 'this', and we cannot override a base method.
Do someone knows how override this methods with this architecture?
var baseItem = function() {
var self = {};
self.a = function () {
console.log('base');
return 1;
};
self.print = function() {
return self.a();
}
return self;
};
var middleItem = function () {
var parent = baseItem();
var self = Object.create(parent);
return self;
}
var overrided = function () {
var parent = middleItem();
var self = Object.create(parent);
self.a = function() {
console.log('overrided');
return 55;
};
return self;
}
var obj = overrided();
overrided.print(); // This returns 1 instead 55, as we would want
In the name of keeping things DRY, I'd like to ask what the typical approach is when trying to avoid declaring duplicate properties. I have two viewModels: set and folder. Here they are:
Folder:
var folderViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data, {}, self);
self.isHovering = ko.observable(false);
self.showCheckbox = function () {
self.isHovering(true);
};
self.hideCheckbox = function () {
self.isHovering(false);
};
self.checkboxIsVisible = ko.computed(function () {
return selectedItemsCount() > 0 || self.isHovering();
}, self);
self.softCheckboxIsVisible = ko.computed(function () {
return selectedItemsCount() > 0 && self.isHovering() == false;
}, self);
self.canDrag = ko.computed(function () {
if (selectedItemsCount() == 0 && !isAddingNewContent()) {
return true;
} else {
return false;
}
}, self);
self.isSelected = ko.observable(false);
self.toggleSelected = function () {
self.isSelected(!self.isSelected());
};
self.textSelected = ko.observable(false);
self.toggleTextSelected = function () {
self.textSelected(!self.textSelected());
};
self.isSet = ko.observable(false);
self.isDeleting = ko.observable(false);
self.isNew = ko.observable(false);
// If the folder hasn't been created yet, it won't have a folderId
if (typeof self.folderId === 'undefined') {
self.isNew(true);
}
self.isEditing = ko.observable(false).publishOn("IS_EDITING_CONTENT");
// monitor for clicks
// temp title
self.oldTitle = ko.observable();
};
Set:
var setViewModel = function (data) {
var self = this;
// Checkbox controls
self.isHovering = ko.observable(false);
self.showCheckbox = function () {
self.isHovering(true);
};
self.hideCheckbox = function () {
self.isHovering(false);
};
self.checkboxIsVisible = ko.computed(function () {
return selectedItemsCount() > 0 || this.isHovering();
}, self);
self.softCheckboxIsVisible = ko.computed(function () {
return selectedItemsCount() > 0 && this.isHovering() == false;
}, self);
self.canDrag = ko.computed(function () {
if (selectedItemsCount() == 0 && !isAddingNewContent()) {
return true;
} else {
return false;
}
}, self);
self.isSelected = ko.observable(false);
self.toggleSelected = function () {
self.isSelected(!self.isSelected());
};
self.textSelected = ko.observable(false);
self.toggleTextSelected = function () {
self.textSelected(!self.textSelected());
};
self.isSet = ko.observable(true);
ko.mapping.fromJS(data, {}, self);
self.isDeleting = ko.observable(false);
self.isNew = ko.observable(false);
// If the folder hasn't been created yet, it won't have a folderId
if (typeof self.setId === 'undefined') {
self.isNew(true);
}
self.isEditing = ko.observable(false).publishOn("IS_EDITING_CONTENT");
// temp title
self.oldTitle = ko.observable();
};
A lot of these properties are duplicated between the viewModels. Should I just keep them as is, or is there a nice way to condense this code?
Create a helper method that both viewmodel constructors call to add all of the common properties...
var helper = function (self, data) {
self.isHovering = ko.observable(false);
// ...
return self;
};
var setViewModel = function (data) {
var self = helper(this, data);
// extra stuff
};
var folderViewModel = function (data) {
var self = helper(this, data);
// extra stuff
};
What about trying inheritance? You could program a prototype viewModel with the properties and functions that both (set and folder) have and then define new "classes" for setViewModel and folderViewModel that have the same prototype as viewModel, just added the properties and functions that only they have.
Introduction to inheritance in javascript can be found here...
I'm trying to understand pure prototype-based JavaScript and one specific thing I'm struggling with is reuse (inheritance).
For my project I landed this way of creating objects that can be reused.
// very generic prototype
var Apparatus = (function(){
var self = Object.create({});
self.state = false;
self.on = function() { this.state = true; };
return self;
})();
// more specific prototype
var Radio = (function(){
var self = Object.create(Apparatus);
self.frequency = 0;
self.setFrequency = function(f) { this.frequency = f; }
self.getFrequency = function() { return this.frequency; }
return self;
})();
I then want to "instantiate"/copy the Radio object, creating two different radios.
var kitchenRadio = Object.create(Radio);
kitchenRadio.state = false;
kitchenRadio.on();
var carRadio = Object.create(Radio);
carRadio.state = false;
console.log(kitchenRadio.state, carRadio.state);
// true false
This works, but will it continue to? Can anyone predict any unwanted outcomes?
Like #pimvdb said, remove state and this works well.
// very generic prototype
var Apparatus = (function(){
var self = Object.create({});
self.on = function() { this.state = true; };
return self;
})();
// more specific prototype
var Radio = (function(){
var self = Object.create(Apparatus);
self.setFrequency = function(f) { this.frequency = f; }
self.getFrequency = function() { return this.frequency; }
return self;
})();
I then use Object.create(Object, params) to instantiate it.
Basically how do I call a base method using this patter below?
var GS = {};
GS.baseClass = function (somedata) {
var that = {};
that.data = somedata;
//Base class method
that.someMethod = function(somedata) {
alert(somedata);
};
return that;
};
GS.derivedClass = function(somedata) {
var that = GS.baseClass(somedata);
//Overwriting base method
that.someMethod = function(somedata) {
//How do I call base method from here?
//do something else
};
return that;
};
Thanks.
var GS = {};
GS.baseClass = function (somedata) {
var that = {};
that.data = somedata;
//Base class method
that.someMethod = function(somedata) {
alert(somedata);
};
return that;
};
GS.derivedClass = function(somedata) {
var that = GS.baseClass(somedata);
//Overwriting base method
var basemethod = that.someMethod;
that.someMethod = function(somedata) {
//How do I call base method from here?
basemethod.apply(that, [somedata]);
//do something else
};
return that;
};
Cheers.