title: Knockout bind check-box to complex object and submit so server
body: <p>I'm creating a collection of check-boxes like this at the moment. </p>
  
  <p>Some context:
  At first i was using the ko.mapping plugin for the whole clientside VM exclusively. </p>
  
  <p><strong>eg in the context of my code:</strong></p>
  
  <pre><code>self.AllAgencyTypes = ko.mapping.fromJS([]);
  
  self.observables = {   //this would be created by the mapping plugin on render/runtime
      SomeProperty: ko.observable(),
      AgencyTypes: ko.observableArray()
  }
  </code></pre>
  
  <p>My check-boxes rendered correctly except the appropriate one's would not be checked on screen load. I then became aware of an issue in knockout where i'd need to change my checked attribute to text. (see on success of my get ajax call)</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;tbody data-bind="foreach: AllAgencyTypes"&gt;
   &lt;tr&gt;
     &lt;td&gt;
      &lt;label class="checkbox inline"&gt;
         &lt;input  type="checkbox" class="editorField" data-bind="attr: { value: Id }, 
                             checked: $root.SelectedAgencies" /&gt;
         &lt;span class="editorField" data-bind="text: Name"&gt;&lt;/span&gt;
      &lt;/label&gt;
    &lt;/td&gt;
   &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p><strong>ViewModel</strong></p>
  
  <pre><code>  AgencyDetailsVM: function (options) {
  
           var self = this;    
  
           self.AllAgencyTypes = ko.mapping.fromJS([]);
  
           //added this to get past the check-box bug
           self.SelectedAgencies = ko.observableArray([]); 
  
           // CRUD Actions
           self.get = function () {
               $.ajax({
                  url: options.getURL,
                  dataType: 'json',
                  success: function (result) {
  
                      self.observables = ko.mapping.fromJS(result);    
  
                      //convert to string array
                      self.SelectedAgencies($.Enumerable.From(result.AgencyTypes)
                          .Select(function (x) {
                            return x.Id.toString();
                          }).ToArray()
                      );
  
  
                      ko.applyBindings(self, $('form')[0]);
                   }
             });
  
  
             $.getJSON(options.getAgencyTypes, function (response) {
                      ko.mapping.fromJS(response, self.AllAgencyTypes);
             });
         };    
   }
  </code></pre>
  
  <p>My current issue is on the save submit. Because my check-boxes are being bound to the newly created observable array, they're not being bound to my server side model.</p>
  
  <pre><code>$.ajax({
           url: options.editURL,
           data: self.observables,
           type: "post",
           dataType: "json",    .... 
  })
  </code></pre>
  
  <p>I've got an idea that if i was able to do something like this... it might solve my problems... but i don't know how. (getting a .string not allowed/something error ATM.)</p>
  
  <pre><code>&lt;input  type="checkbox" class="editorField" data-bind="attr: { value: Id }, 
                                 checked: $root.observables.AgencyTypes.Id.toString()" /&gt;
  </code></pre>
  
  <p>Thus my only option i see available is to push the collection back into the original object created by ko.mapping... which i also don't know how to do at the moment... any ideas guys?</p>