title: ASP.NET with Knockout variable length list with combobox - how to bind?
body: <p>With the following ASP.NET models</p>
  
  <pre><code>public class User
    {
      public string Name { get; set; }
      public LEmail LEmail { get; set; }
    }
  public class LEmail
    {
      public IList&lt;CLabel&gt; Labels;
      public IList&lt;CEmail&gt; Emails;
    }
  public class CLabels
    {
      public IList&lt;CLabel&gt; Labels { get; set; }
    }
  public class CLabel
    {
      public string Name { get; set; }
    }
  public abstract class CEmail
    {
      public string SelectedLabel { get; set; }
      public string Name { get; set; }
    }
  </code></pre>
  
  <p>Filling it out with dummy data and sending to appropriate view as <code>User</code> object, I have the following knockout definitions in the view:</p>
  
  <pre><code>@using (Html.BeginForm("MyAction", "MyController", FormMethod.Post, new { id = "MyEditor" }))
  {
    @Html.EditorFor(m =&gt; @Model.LEmail)
   &lt;p&gt;
      &lt;input type="submit" value="Save" data-bind="enable: Emails().length &gt; 0" /&gt;
      &lt;a href="/"&gt;Cancel&lt;/a&gt;
    &lt;/p&gt;
  
    &lt;p data-bind="visible: saveFailed" class="error"&gt;A problem occurred saving the data.&lt;/p&gt;
  
    &lt;div id="debug" style="clear: both"&gt;
      &lt;hr /&gt;
      &lt;h2&gt;Debug:&lt;/h2&gt;
      &lt;div data-bind="text: ko.toJSON(viewModel)"&gt;&lt;/div&gt;
    &lt;/div&gt;
  }
  
  &lt;script type="text/javascript"&gt;
  
    $(function() {
      ko.applyBindings(viewModel);
  
      $("#profileEditorForm").validate({
        submitHandler: function(form) {
      if (viewModel.save())
        window.location.href = "/";
      return false;
        }
      });
    });
  
    var viewModel = {
  
      Name: ko.observable("@Model.Name"),
  
      Labels: ko.observableArray(@Html.Json(Model.LEmail.Labels) || []),
      Emails: ko.observableArray(@Html.Json(Model.LEmail.Emails) || []),
      addEmail: function() {
        viewModel.Emails.push(@Html.Json(new CEmail()));
      },
      removeEmail: function(eml) {
        viewModel.Emails.remove(eml);
      },
  
      saveFailed: ko.observable(false),
  
      // Returns true if successful
      save: function() {
        var saveSuccess = false;
        viewModel.saveFailed(false);
  
        // Executed synchronously for simplicity
        jQuery.ajax({
      type: "POST",
      url: "@Url.Action("MyAction", "MyController")",
      data: ko.toJSON(viewModel),
      dataType: "json",
      contentType: "application/json",
      success: function(returnedData) {
        saveSuccess = returnedData.Success || false;
        viewModel.saveFailed(!saveSuccess);
      },
      async: false
        });       
        return saveSuccess;
      }
    };
  &lt;/script&gt;
  </code></pre>
  
  <p>And finally the editor template that is actually supposed to take care of variable length list that look like this:</p>
  
  <pre><code>@model MyDomain.ViewModels.LEmail
  
  &lt;table&gt;
      &lt;tbody data-bind="template: { name: 'EmailsTemplate', foreach: Emails }" /&gt;
  &lt;/table&gt;
  
  &lt;button data-bind="click: addEmail"&gt;Add Email&lt;/button&gt;
  
  &lt;script id="EmailsTemplate" type="text/html"&gt;
        &lt;tr&gt;
          &lt;td&gt;
        @* PROBLEM IS HERE!! Labels won't show (they will it this code taken out of template) *@
             &lt;select data-bind="options: Labels"&gt;&lt;/select&gt;&lt;/td&gt;
          &lt;td&gt;
            &lt;input type="text" data-bind="value: Name, uniqueName: true" class="required" /&gt;&lt;/td&gt;
          &lt;td&gt;
            &lt;a href="#" data-bind="click: function() { viewModel.removeEmail(this); }"&gt;Delete&lt;/a&gt;&lt;/td&gt;
        &lt;/tr&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Essentially I </p>
  
  <ol>
  <li>cannot make it work in the <code>EditorTemplate</code> for combobox (or
  dropdownlist). It won't attach to Labels no matter what I do. If I
  take it outside the template somewhere else - it works as expected. </li>
  <li><p>Also, based on selection to fill out the "SelectedValue" inside the Email - how to do that.</p></li>
  <li><p>After everything is selected, (this must be simple) how to post it
  all back without losing values on the way (its a super nested model
  as you see).</p></li>
  </ol>
  
  <p>Thank you very much in advance!</p>