Send a POST ajax to add products to quotation

Question

My background is more server-side than front-end. So I may be lacking in some basic front-end knowledge.

I have a endpoint called

/quotations/:id/products

which if you do a POST action, this means you want to add products to the specified quotation where :id represents the quotation id.

In my schema, quotations and products have a many-to-many relationship.

The endpoint also expects the data is sent in the form of products[].

Meaning to say, if I want to add products with id 2, 7, and 154 to the quotation 3

I am POSTING

<input name="products[]" value="2" />
<input name="products[]" value="7" />
<input name="products[]" value="154" />

to the url /quotations/3/products

My question is how do I create the Model and View using Backbone for this setup?

I bought Addy Osmani's book on Developing Backbone.js Applications. So I have setup my backbone similar to his example.

There is only an example of a straight forward add model.

Hopefully I get an answer that follows the convention that Osmani sets out for adding children to a parent type of behavior.

Osmani also mentioned about Backbone Relational.

I am not sure if I should use this or even how. I have read the documentation, but I am not sure how to fit this into the way Osmani has structured his Backbone example apps.

UPDATE:

If it is a success, I want the page to redirect to another page called /success.

If it is a failure, I want the page to display a failure message somewhere. Assume there is a <div id="message"></div> for me to update.

In other words, for failure, the page stays as a single page app.

For success, the page goes to another page.

As for server-side code for returning JSON replies etc, I can do this without any problems. Assume I use PHP.

Answer 1

I faced a similar problem recently, I can't tell your for certain this is the best way to do it but it's the way i've found to work reliably. I tried BackboneRelational but was having troubles with it.

This assumes you will need to create the Quote object & ProductQuotation in 1 step.

• Set up a view for New Quote

• On initialization of this view:

  A) Create a new empty Quote model

  B) Create a new collection for ProductQuotes

  C) Create a new ProductQuote view for each ProductQuote you're adding

  D) Subscribe the Quote view to a custom Backbones event binding (Backbone JS: can one view trigger updates in other views?), i.e.

  Backbone.pubSub.on('quote_new-product-save', this.AddProduct, this)

  This view will now call AddProduct any time you trigger this event.

• On initializing each ProductQuote view create a new Product model

• Wire this view up for your user to fill in any applicable information & when they are done set this information to that views Product model & trigger the "quote_new-product-save" event mentioned above and pass it that product model.

• Back in the Quote view, AddProduct will automatically be called as it was binded to this event. You should wire this to receive the new Product model & add it to the ProductQuotes collection.

• So now you have your Product model data set to your ProductQuotes collection but this is still not directly linked to the current Quote (which still hasn't been saved) so set the 'order_items' attribute on your model to all models in your ProductQuote collection i.e.

  this.model.set('product_quotes', this.collection.models)

Now your unsaved Quote model will have all members of your ProductQuotes collection set as an attribute.

Now you'll need to call save on the Quote model & send the data to the server. Things to keep in mind here is that your urlRoot is set properly & that the data being sent to the server is being properly formatted. I recommend reading Saving nested objects with Rails, backbone.js, and accepts_nested_attributes_for about overriding the toJSON method in your Quote model.