I've developed a ViewModel that looks like this.
function PageSectionVM(pageSection) {
var self = this;
self.SectionName = ko.observable();
self.Markup = ko.observable();
self.update(pageSection);
}
In addition, I've implemented the update method as called in the constructor function above.
PageSectionVM.prototype.update = function (pageSection) {
var self = this;
pageSection = pageSection || {};
self.SectionName(pageSection.SectionName);
self.Markup(pageSection.Markup);
};
This ViewModel is kept in its own file and I want to be able to reuse it in multiple pages. In one specific page, I aim to 'extend' this viewmodel by adding a new function. I attempted to do this by appending a new function to PageSectionVM's prototype like this.
PageSectionVM.prototype.tabName = function () {
var self = this;
return "#tab-" + self.SectionName();
};
However, when I include this as a knockout binding statement, it outputs the actual text of the function instead of the expected result. I suspect there might be something missing in my implementation. When I incorporate tabName as a computedObservable within the original viewmodel, it functions correctly. But, this means inserting specific code for a single purpose into the 'general' viewmodel code, which I'd prefer to avoid.
The knockout binding statement I'm using is
<a data-bind="attr:{href: tabName}, text:SectionName"></a>
This is placed within a foreach loop on an observableArray of PageSectionVMs. The text property displays properly, but the href ends up showing the literal text of the function rather than its output.
Any assistance would be highly appreciated.