asp.net mvc 4 - How can I use a Knockout viewmodel inside a server loop? -

i want use html helpers , knockout create seamless transition of data server client, , server again on postback.

my viewmodel has few properties , array of items. need know how can iterate on array in asp.net razor while assigning knockout bindings individual elements in array.

here's have far:

@for (int = 0; < model.fields.count; i++) {        <div name="customformfield" data-bind="with: fields[@i]">         <div class="form-group">             @html.labelfor(m => m.fields[i].sqldatatype)             @html.listboxfor(m => m.fields[i].sqldatatype, new selectlist(selectdatatypeoptions), new { @class = "form-control", data_bind = "value: sqldatatype" })         </div>     </div>   } 

my ko javascript:

<script>     function viewmodel() {         this.addfield = function() {             alert("wut");         }     }      $(function (){         var jsonmodel = @html.raw(json.encode(model));         var mvcmodel = ko.mapping.fromjs(jsonmodel);          var customformtemplateviewmodel = new viewmodel();         var g = ko.mapping.fromjs(customformtemplateviewmodel, mvcmodel);          ko.applybindings(g);     }); </script>  

when browse page, elements rendered <div name="customformfield" data-bind="with: fields[x]"></div> elements, neither form-group div inside nor label/listbox created on page.

there no binding errors knockoutjs.

if remove data-bind="with: fields[@i]", other elements render properly, must trying bind element in array that's making go sideways, haven't been able figure out what.

edit: here's html output this:

it's interesting because if inspect dom chrome's inspector, doesn't show inside each customformfield div, in source have elements inside. it's outputting system.web.mvc.selectlistitem in each item, think made selectlist wrong.

    <div name="customformfield" data-bind="with: fields[0]">         <div class="form-group">             <label for="fields_0__sqldatatype">sqldatatype</label>             <select class="form-control" data-bind="text: sqldatatype" id="fields_0__sqldatatype" multiple="multiple" name="fields[0].sqldatatype"><option>system.web.mvc.selectlistitem</option> <option>system.web.mvc.selectlistitem</option> <option>system.web.mvc.selectlistitem</option> <option>system.web.mvc.selectlistitem</option> </select>         </div>     </div>       <div name="customformfield" data-bind="with: fields[1]">         <div class="form-group">             <label for="fields_1__sqldatatype">sqldatatype</label>             <select class="form-control" data-bind="text: sqldatatype" id="fields_1__sqldatatype" multiple="multiple" name="fields[1].sqldatatype"><option>system.web.mvc.selectlistitem</option> <option>system.web.mvc.selectlistitem</option> <option>system.web.mvc.selectlistitem</option> <option>system.web.mvc.selectlistitem</option> </select>         </div>     </div>       <div name="customformfield" data-bind="with: fields[2]">         <div class="form-group">             <label for="fields_2__sqldatatype">sqldatatype</label>             <select class="form-control" data-bind="text: sqldatatype" id="fields_2__sqldatatype" multiple="multiple" name="fields[2].sqldatatype"><option>system.web.mvc.selectlistitem</option> <option>system.web.mvc.selectlistitem</option> <option>system.web.mvc.selectlistitem</option> <option>system.web.mvc.selectlistitem</option> </select>         </div>     </div>       <div name="customformfield" data-bind="with: fields[3]">         <div class="form-group">             <label for="fields_3__sqldatatype">sqldatatype</label>             <select class="form-control" data-bind="text: sqldatatype" id="fields_3__sqldatatype" multiple="multiple" name="fields[3].sqldatatype"><option>system.web.mvc.selectlistitem</option> <option>system.web.mvc.selectlistitem</option> <option>system.web.mvc.selectlistitem</option> <option>system.web.mvc.selectlistitem</option> </select>         </div>     </div>       <div name="customformfield" data-bind="with: fields[4]">         <div class="form-group">             <label for="fields_4__sqldatatype">sqldatatype</label>             <select class="form-control" data-bind="text: sqldatatype" id="fields_4__sqldatatype" multiple="multiple" name="fields[4].sqldatatype"><option>system.web.mvc.selectlistitem</option> <option>system.web.mvc.selectlistitem</option> <option>system.web.mvc.selectlistitem</option> <option>system.web.mvc.selectlistitem</option> </select>         </div>     </div>  

edit 2: example showing when tried text binding, i've tried both ways.

edit 3: copied output html place on page, , didn't render either, until removed data-bind="with: fields[n]" containing div, problem seems there. however, if remove parent in actual file, binding error data-bind="value: sqldatatype"