I have a page that contains information for a subscriber, their spouse, and N number of dependents.
For each one, we're asking for their name, dob, address, etc. Basically, it's the same fields over and over. I can create a model for the subscriber and the spouse. I'll always have a subscriber, and I'm not worried about creating an empty spouse node in my model, but for the kids, I'm unsure how to proceed...
My page is a very long page with lots of sections that will be hidden until it's time to deal with that section- like a wizard.
Each section in my current page starts with an outer div:
<div data-bind="with: submodelName"> // i.e. subscriberInfo, spouseInfo
I just don't know how to proceed with the N number of children.
I can stuff an entire <div><form></form><div> section into a <script> tag and make it a template, but how do I bind a different model to each item? i.e. how do I simulate the "with:" part?
My current model set up is that I have a large wrapping model into which I'm creating many submodels (4 + one for each child) and calling a single applyBindings():
var masterPageModel = new PageViewModel(); // pulls in several other modules
// ... pageViewModel.js contents::
// *** section-specific models
self.selectedCoverage = ko.observable();
self.contactInformation = ko.observable();
self.subscriberInformation = ko.observable();
self.spouseInformation = ko.observable();
self.dependentInformation = ko.observableArray(); // how will this work? array?
$.getJSON("./load.php",{},function(modelPackage){
// **** meta properties
self.modelList(modelPackage.modelList);
self.currentModel(modelPackage.currentModel);
// models
self.selectedCoverage(new SelectedCoverage(modelPackage.models["selectedCoverage"]));
self.contactInformation(new ContactInformation(modelPackage.models["contactInformation"]));
self.subscriberInformation(new SubscriberInformation(modelPackage.models["subscriberInformation"]));
self.dependentInformation(new DependentInformation(modelPackage.models["dependentInformation"])); // this isn't working
// dependentInformation is an array of people and information....
});
//... back to first file:
ko.applyBindings(masterPageModel);
Thanks. Any help would be greatly appreciated.