title: Serializing form data when form is a marionette layout view
body: <p>I have an object that looks like this:</p>
  
  <pre><code>{
    "id": "someId",
    "name": "some name",
    "endpoints": [
      { "scheme": "http", "host":"localhost", "port":"8080" }
    ]
  }
  </code></pre>
  
  <p>I want to edit this data in a Marionette app. I've defined:</p>
  
  <ul>
  <li>a Backbone Model for my outermost object, let's call it Server</li>
  <li>a Backbone Model for Endpoint</li>
  <li>a Backbone Collection for Servers</li>
  <li>a Backbone Collection for Endpoints</li>
  </ul>
  
  <p>My goal is to have a form that allows N number of endpoints to be added such that when the form is submitted, I will persist the entire object (the server data and the list of endpoints).</p>
  
  <p>To implement this I first overrode the parse function to instantiate the Endpoints collection like this:</p>
  
  <pre><code>parse: function(response) {
      var data = response;
      if (response.endpoints) {
          data.endpoints = new Entities.EndpointCollection(response.endpoints, {parse: true});            
      }
      return data;
  },
  </code></pre>
  
  <p>Then, I created a LayoutView that holds my server related fields and contains a region for my list of endpoints. My Controller instantiates the view and passes in the Server model. My Controller also instantiates a CollectionView and passes in the Server's endpoints collection.</p>
  
  <p>The form renders as expected with input controls for id, name, and repeating sets of inputs for as many endpoints as I have in my object.</p>
  
  <p>However, it is not clear to me how serialization is supposed to work with this setup. If I remove an endpoint by destroying its model, the endpoint is removed when the data is persisted. However, if I change any of the endpoint data, those changes are ignored.</p>
  
  <p>In my form submit handler I can iterate over the endpoints but those models do not reflect the changed form values.</p>
  
  <pre><code>submitClicked: function (e) {
      e.preventDefault();
      var data = Backbone.Syphon.serialize(this); // I know this is not enough
      var endpoints = this.model.get("endpoints");
      for (var i = 0; i &lt; endpoints.length; i++) {
          var endpoint = endpoints.models[i];
          alert("got endpoint: " + endpoint.get("host"));
      }
      this.trigger("form:submit", data);
  },
  </code></pre>
  
  <p>I assume there is a fundamental misunderstanding in how best to handle repeating groups within a form. What am I missing?</p>