Multiple view model bindings, shared error dialog with bindings - data-binding

Question

I have two view models on a single page that correspond to two different sets of content on different tabs.
I'm binding each view model to its corresponding root element in the markup. However, I want to have a generic section of markup that either model can use (a generic modal dialog for errors on a master page in my scenario) that is not contained within any of the bound root elements.
How should I handle this? Should I nest the multiple models inside of one master view model or something and not bind to specific elements? I'm fairly new to knockout so I'm open to all suggestions.
This shows what I'm trying to accomplish minus the duplicated modal sections. Fiddle: http://jsfiddle.net/z3wGr/3/
JS:
ko.bindingHandlers.errorModal = {
update: function (element, valueAccessor) {
var valueAccessorValue = valueAccessor();
var value = ko.utils.unwrapObservable(valueAccessorValue);
if (value.length > 0) {
// $(element).modal('show');
console.log("would be showing modal here");
} else {
// $(element).modal('hide');
}
}
};
var sectionOneViewModel = {
sectionOne: ko.observable("section one"),
errors: ko.observableArray([]),
aSectionOneMethod: function (self) {
// make AJAX call here
// error returns from server
// push error into array triggering modal because of custom binding handler
self.errors.push({
errorText: "something went wrong."
})
}
}
var sectionTwoViewModel = {
sectionTwo: ko.observable("section two"),
errors: ko.observableArray([]),
aSectionTwoMethod: function (self) {
// make AJAX call here
// error returns from server
// push error into array triggering modal because of custom binding handler
self.errors.push({
errorText: "something went wrong."
})
}
}
ko.applyBindings(sectionOneViewModel, document.getElementById('section-one'));
ko.applyBindings(sectionTwoViewModel, document.getElementById('section-two'));
HTML:
<div id="section-one">
<span data-bind="text: sectionOne"></span>
<br />
<input type="button" value="call section one function" data-bind="click: aSectionOneMethod" />
<!-- This is a generic modal that all of my viewmodels use to show errors, I don't want to include it in every binding section -->
<div id="generic-error-modal" data-bind="errorModal: errors">
<p>I'm a modal dialog that would actually only display when an error is returned from the server after an AJAX call.</p>
<ul data-bind="foreach: errors">
<li data-bind="text: errorText"></li>
</ul>
</div>
</div>
<div id="section-two">
<span data-bind="text: sectionTwo"></span>
<br />
<input type="button" value="call section two function" data-bind="click: aSectionTwoMethod" />
<!-- This is a generic modal that all of my viewmodels use to show errors, I don't want to include it in every binding section -->
<div id="generic-error-modal" data-bind="errorModal: errors">
<p>I'm a modal dialog that would actually only display when an error is returned from the server after an AJAX call.</p>
<ul data-bind="foreach: errors">
<li data-bind="text: errorText"></li>
</ul>
</div>
</div>
**Edit: Working example based off the answer and comments below: http://jsfiddle.net/z3wGr/6/

Answer 1

I'd recommend to have one viewModel which nests the other two models. You may need to pass in the errors to your nested models so they can interact with the errors.
I'd also recommend to use functions for your models and new the objects.
Here is a cutdown version. I haven't tested it so there may be some minor errors:
var ViewModel = function() {
var self = this;
self.errors = new Errors();
self.sectionOne = new SectionOneViewModel(self.errors);
self.sectionTwo = new SectionTwoViewModel(self.errors);
};
var SectionOneViewModel = function(errors) {
var self = this;
self.sectionOne = ko.observable("section one");
self.errors = errors;
//this is how to add an error
self.errors.add("This is an error");
};
var SectionTwoViewModel = function(errors) {
var self = this;
self.sectionTwo = ko.observable("section two");
self.errors = errors;
};
var Errors = function() {
ver self = this;
self.errors = ko.observableArray();
self.add = function (errorText) {
self.errors.push(new Error(errorText));
};
self.clear = function() {
self.errors.removeAll();
};
};
var Error = function(errorText) {
var self = this;
self.errorText = errorText;
};