How can I bind fields to knockout in an Editor Template in MVC4?
===

In my MVC4 project I have a Category view model with a collection of Product view models. I use an Editor Template to render a single Product view model, and pass the collection of Product view models to it:

Category view model:

    @model CategoryViewModel
    @using MVC4PartialViews.Models.ViewModels
    
    <div class="editor-field">
        @Html.EditorFor(model => model.CategoryName)
        @Html.ValidationMessageFor(model => model.CategoryName)
    </div>
    
    @Html.EditorFor(x => x.Products)

Editor template that renders each Product in the collection:

    <div class="editor-field">
        @Html.EditorFor(model => model.ProductName)
        @Html.ValidationMessageFor(model => model.ProductName)
    </div>
    // etc.

This works very well as it automagically names and indexes the elements correctly so all the Products get posted back as part of the parent Category view model - here's what it outputs:

    <div class="editor-field">
        <input class="text-box single-line" id="Products_0__ProductName" name="Products[0].ProductName" type="text" value="Add 1st product for this Category" />
        <span class="field-validation-valid" data-valmsg-for="Products[0].ProductName" data-valmsg-replace="true"></span>
    </div>

A couple of things I need to do:

How can I bind fields in the Editor template to knockout? Can I somehow access or use the index value that the editor template uses to name the elements? I can bind fields no problem in the parent (Category) view model as below:

    <script>
        window.defaultCategory = @Html.Raw(Json.Encode(Model));
    </script>
    
    @Html.TextBoxFor(
    	model => model.CategoryName,
    	new Dictionary<string, object>
    	{
    	    {"style", "width: 30%;"},
    		{"placeholder", "Please enter the Category name"},
    		{ "data-bind", "value: currentCategory.CategoryName" }
    	})

Secondly I need to lets users add and remove Products. To add a new one I somehow need to dynamically render the editor template to create the new Product and have each field indexed / named correctly i.e if I already have 2 Products (indexed 0 and 1) then the new Product would need to be named as such: 

> Products[2].ProductName

I've read this article by Steve Sanderson but it seems clunky and he indexes his fields with a Guid rather than a consecutive index field:

[Editing a variable length list in MVC2][1]


  [1]: http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/

All help or ideas appreciated :)