knockout.js - knockoutjs - javascript array to observableArray to template - how to? -

i have page contains information subscriber, spouse, , n number of dependents.

for each one, we're asking name, dob, address, etc. basically, it's same fields on , over. can create model subscriber , spouse. i'll have subscriber, , i'm not worried creating empty spouse node in model, kids, i'm unsure how proceed...

my page long page lots of sections hidden until it's time deal section- wizard.

each section in current page starts outer div:

<div data-bind="with: submodelname">  // i.e. subscriberinfo, spouseinfo 

i don't know how proceed n number of children.

i can stuff entire <div><form></form><div> section <script> tag , make template, how bind different model each item? i.e. how simulate "with:" part?

my current model set have large wrapping model i'm creating many submodels (4 + 1 each child) , calling 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 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"]));  // isn't working          // dependentinformation array of people , information....      });       //... first file:  ko.applybindings(masterpagemodel); 

thanks. appreciated.

scott, not sure understand completely, may help:

only 1 form

one approach display "add dependent" button, list of dependent names user select, , show single form edit (or add) selected dependent. excuse pseudocode, this:

mymodel = {     mydependents = ko.observablearray(dependents);     myselecteddependentindex = ko.observable(0);     myactivedependent = ko.computed(function(){ return mydependents()[myselecteddependentindex()];}); } 

then bind form model's myactivedependent computed observable.

one form each dependent

another approach use foreach binding.

mymodel = {     mydependents = ko.observablearray(dependents);         }  mydependentmodel = {     name = ko.observable('somename'); }  <div id="dependentformlistcontainer">     <ul data-bind="foreach: mydependents">         <li class="dependentform">             <input type="text" data-bind="value: name" />         </li>     </ul> </div>  ko.applybindings(mymodel, $('#dependentformlistcontainer')[0]); 

again, pseudocode, point in direction of solution.