title: Create checkbox list in Backbone.js
body: <p>I'd like to create a form which contains a text field and a list of checkboxes. </p>
  
  <p>Using the underscore template function with a <a href="http://underscorejs.org/#each" rel="nofollow"><code>_.each()</code></a> statement I can get it rendered.</p>
  
  <p>When I click the save button I get the model (with the text field) but the array for the checkboxes is not where it should be.... </p>
  
  <p>This my view model:</p>
  
  <pre><code>window.SpotEditView= Marionette.View.extend({
  
      initialize: function () {
          var featureList = ['Rail', 'Curb','Pipe'];
          //this.el = this.compiledTemplate(this.model.toJSON());
          var viewModel = this.model.toJSON();
          viewModel.features = featureList;
  
          $(this.el).html( _.template(htmlBody, viewModel));
          return;
      },
  
      render: function () {
          return this;
      },
  
      events: {
          "change"        : "change",
          "click .save"   : "beforeSave",
          "click .delete" : "delete",
          "drop #picture" : "dropHandler"
      },
  
      beforeSave: function () {
          var self = this;
          var check = this.model.validateAll();
          if (check.isValid === false) {
              utils.displayValidationErrors(check.messages);
              return false;
          }
          // Upload picture file if a new file was dropped in the drop area
          if (this.pictureFile) {
              this.model.set("picture", this.pictureFile.name);
              utils.uploadFile(this.pictureFile,
                  function () {
                      self.save();
                  }
              );
          } else {
              self.save();
          }
          return false;
      },
  
      save: function () {
          var self = this;
          this.model.save(null, {
              success: function (model) {
                  self.render();
                  var point = model.toMarker();
                  app.mapView.model.markers.add(point);
                  app.navigate('map', true);
                  app.mapView.openInfo(point);
  
              },
              error: function () {
                  utils.showAlert('Error', 'An error occurred while trying to save this item', 'alert-error');
              }
          });
      }
  });
  </code></pre>
  
  <p>This is the relevant part of my html template:</p>
  
  <pre><code>&lt;% _.each(features, function(f,key) { %&gt;
  &lt;label class="checkbox"&gt;
      &lt;input type="checkbox" name="features[&lt;%= key-1 %&gt;]" value="&lt;%= f %&gt;"&gt;
      &lt;%= f %&gt;
  &lt;/label&gt;
  &lt;% }); %&gt;
  </code></pre>
  
  <p>The model that the save function recieves looks like this: </p>
  
  <pre><code>{..
      attributes:{ ...
          features:[],
          features[1]:'Dick',
          ...
      }
  }
  </code></pre>
  
  <p>It seems as if the backbone 'form-parser' cannot handle the array.</p>
  
  <p>Is there a fix or a better solution to this approach?</p>