How to submit BackboneJs models in html form post?

Question

I am posting a form to a url from a page that displays backbonejs models.

This is how my backbonejs model looks like in the form:

Form:

<form class="form-horizontal" action="profit" method="post">
<fieldset>

<!-- Form Name -->
<legend>Form Name</legend>

<!-- Button -->
<div class="control-group">
  <div class="controls">
    <div id="example-1-result" class="backgrid-container"></div>
    <button id="profit" name="profit" class="btn btn-primary">Button</button>
  </div>
</div>

</fieldset>
</form>

JavaScript:

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../static/js/bootstrap.min.js"></script>

    <script>

var Trade = Backbone.Model.extend({});

var Trades = Backbone.Collection.extend({
  model: Trade,
  url: "fodata"
});


var columns = [
 {
  name: "trade_id",
  label: "Trade Id",
  // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
  cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
}, 
 {
  name: "order_id",
  label: "Order Id",
  // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
  cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
}, 
{
  name: "trade_date",
  label: "Trade Date",
 cell: "datetime",
},
{
  name: "trade_time",
  label: "Trade Time",
  cell: "datetime",
},
{
  name: "contract_description",
  label: "Contract Description",
  cell: "string" // An integer cell is a number cell that displays humanized integers
}, 
{
  name: "expiry_date",
  label: "Expiry Date",
  cell: "datetime",
},
{
  name: "buy_quantity",
  label: "Buy Quantity",
  cell: "integer" // An integer cell is a number cell that displays humanized integers
}, {
  name: "buy_rate",
  label: "Buy Rate",
  cell: "number",
},
{
  name: "sale_quantity",
  label: "Sale Quantity",
  cell: "integer" // An integer cell is a number cell that displays humanized integers
}, {
  name: "sale_rate",
  label: "Sale Rate",
  cell: "number",
}
];

var trades = new Trades;

var grid = new Backgrid.Grid({
      columns: columns,
      collection: trades
    });

// Initialize a new Grid instance
var refreshgrid = function(){
    $("#example-1-result").prepend(grid.render().$el);
}

 </script>

Now, while submitting, I need to submit the trades JSON data but I'm not able to get the model to submit.

How do I achieve this? Do I need to use backbonejs forms?

Answer 1

Backgrid is supposed to give you something to quickly edit all the models you give it to it (through the collection) using the normal backbone mechanisms. So technically, you shouldn't use a form to wrap it, and when editing each Trade model, the Trade model should be saved() after the end of the edit. Backgrid is a nice way to wrap basic CRUD on top of a resource.

If that's not the behavior you want, then maybe Backgrid isn't what you need?

That being said, nothing prevents you at anytime, no matter what's in the form, to do something like:

$("form").on("submit", function(event){
  //Don't send the form, stay on the page
  event.preventDefault();
  //Transform the collection of Trades into an array of JSONified Trade
  data = trades.map(function(trade){
    return trade.toJSON();
  });
  //Post this to the server
  $.post("url", {trades: data}, ... );
  return false;
});

But that seems odd.

If I misunderstood, maybe you can clarify your intent a bit? Hope this helps!

Answer 2

You should just be able to serialize the model and POST it.

See: http://api.jquery.com/serialize/

If you .serialize the data you want and send that as part of your POST request it should work. Alternatively if you're looking for something a bit more advanced take a look at syphon:

http://lostechies.com/derickbailey/2012/05/17/backbone-syphon-serialize-form-inputs-to-javascript-objects/

Serializing is most likely the key to what you want to achieve.