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

Question

I want to use Html helpers and Knockout to create a seamless transition of data from server to client, and then back to server again on postback.
My ViewModel has a few properties and then an array of items. I need to know how I can iterate over my array in ASP.NET Razor while assigning my knockout bindings to individual elements in the array.
Here's what I have so far:
#for (int i = 0; i < 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 I browse the page, the only elements rendered are the <div name="customFormField" data-bind="with: Fields[x]"></div> elements, neither the form-group div inside it nor the label/listbox are created on the page.
There are no binding errors from KnockoutJS.
If I remove the data-bind="with: Fields[#i]", the other elements render properly, so it must be something about trying to bind to an element in an array that's making this go sideways, but I haven't been able to figure out what.
Edit: Here's the Html that is output from this:
It's interesting because if I inspect the DOM with chrome's inspector, it doesn't show anything inside each customFormField div, but in the source it does have the elements inside. It's outputting the System.Web.Mvc.SelectListItem in each item, but I think I just made my 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: This example is showing when I tried the text binding, but I've tried it both ways.
Edit 3: I copied the output Html into another place on the page, and it didn't render that either, until I removed the data-bind="with: Fields[n]" from the containing div, so the problem seems to be there. However, if I remove that from the parent in the actual file, I get a binding error from data-bind="value: SqlDataType"