Knockout inheritance reusing same instance of base ViewModel? - asp.net-mvc

Question

I am using Knockout.js on an MVC application.
I am attempting to use inheritance, but I think may BaseViewModel is being reused, instead of a new one being created for each ViewModel instance.
I have a single BaseViewModel, and multiple ViewModels that extend it. The behavior is the same for all Views\ViewModels - They display a list of items as an html table, and clicking the edit button of a row pops up the selected row in a modal window so that you can edit and save the changes to that row.
These all work just fine on their independent views. However, when I try to display them all on a single view, I am having issues.
The lists for each View are all binding just fine.
Clicking edit on a selected row of the LAST list/table works fine.
But clicking edit on a selected row of the FIRST list/table fails with error.
Uncaught ReferenceError: Unable to process binding "value: function (){return Name }"
"Name" is a property of the model on the the second ViewModel, not the first.
It appears that error is because only one BaseViewModel is getting created, and so properties of that BaseViewModel are being overwritten every time I add a new ViewModel to the View.
Here is a fiddle with Example of the issue.
JSFiddle
Take a look at the editItem function and bring up the console.
Then click on Edit of the second table, you will see it properly prints to console the values passed into the base class, and the Modal window opens fine.
If you then cancel and click edit of the first table, you will see it prints the SAME values that the second ViewModel passed into the BaseVM, and NOT the values that it itself passed in.
Here is my knockout BaseViewModel as well the derived ViewModels.
EnvironmentAssetBaseViewModel = function(modalWindowName, apiResourceName, modelDefinition) {
var self = this;
self.modalWindowName = modalWindowName;
self.apiResourceName = apiResourceName;
self.modelDefinition = modelDefinition;
self.itemList = ko.observableArray([]);
self.selectedRow = ko.observable(modelDefinition);
function getData() {
//make ajax API call and store data in itemList
var data = [];
if (apiResourceName == 'activityLogs') {
data = [
{ Id: "1", Action: "a", Details: "d"},
{ Id: "2", Action: "b", Details: "e"},
{ Id: "3", Action: "c", Details: "f"}
]
} else {
data = [
{ Id: "109", Name: "a", Description: "d" },
{ Id: "209", Name: "b", Description: "e" },
{ Id: "309", Name: "c", Description: "f" }
]
}
self.itemList(data);
}
function editItem(item) {
console.log(self.modalWindowName);
console.log(self.apiResourceName);
console.log(self.modelDefinition);
self.selectedRow(item);
$(modalWindowName).modal('show');
}
function cancel(item) {
$(modalWindowName).modal('hide');
}
return {
self: self,
itemList: self.itemList,
selectedRow: self.selectedRow,
getData: getData,
editItem: editItem,
cancel: cancel
}
};
ActivityLogsViewModel = function() {
var self = this;
var modalName = "#activityLogModal";
var apiResourcename = "activityLogs";
var modelDefinition = { Id: "", Action: "", Details: "" };
ko.utils.extend(self, new EnvironmentAssetBaseViewModel(modalName, apiResourcename, modelDefinition));
getData(); //initial data load
return {
self: self,
editItem: editItem,
cancel: cancel
}
};
ko.applyBindings(ActivityLogsViewModel, document.getElementById('activityLogsDiv'));
DomainsViewModel = function() {
var self = this;
var modalName = "#domainModal";
var apiResourcename = "domains";
var modelDefinition = { Id: "", Name: "", Description: "" };
ko.utils.extend(self, new EnvironmentAssetBaseViewModel(modalName, apiResourcename, modelDefinition));
getData(); //initial data load
return {
self: self,
editItem: editItem,
cancel: cancel
}
};
ko.applyBindings(DomainsViewModel, document.getElementById('domainsDiv'));

Answer 1

You're mixing up some methods of creating "instances" of functions.
You've defined constructor functions that "manually" return a plain object. This is perfectly fine, but it means you don't call them with the new keyword.
The new keyword creates a new this context, but since you're not using it, your first line:
var self = this;
will set self to whatever the context of the caller of the factory method is. In this case, window.
This means all your constructor functions/factories are polluting the window namespace, resulting in a weird combination of properties that are missing/overridden.
Try replacing var self = this with var self = {} to create a new object. Make sure you call your functions to create viewmodels: var activityVM = ActivityLogsViewModel().
You'll run in to some other bugs (for example, getData() needs to be self.getData()), but you should be able to figure it out.
Let me know if you need more help.