backbone.js one model being changed by multiple views?

Question

Okay, I've only started learning backbone.js last night and I have to admit I am a tad baffled at the moment. My scenario is relatively simple, I have one HTML table with an id of #checkout_table. This table has 4 rows. It will always have 4 rows, it will never decrease or increase the number of rows. There are various other form elements on the page which I want to be able to effect the values of the rows. Eventually this will be via ajax, but that doesn't seem important for this example. Here is what I came up with: http://jsfiddle.net/XYZas/

In the backbone docs it says that, "The general idea is to organize your interface into logical views, backed by models, each of which can be updated independently when the model changes, without having to redraw the page. Instead of digging into a JSON object, looking up an element in the DOM, and updating the HTML by hand, you can bind your view's render function to the model's "change" event — and now everywhere that model data is displayed in the UI, it is always immediately up to date."

Am I on the right track to do this? Is passing around an instance of the CheckoutTable model as a global variable really the right way to do this or would you do it differently?

Thanks in advance for your help.

Answer 1

Like czar mentioned: Model represents your data, Views use your models to render it into HTML for display.

Your app should look more along the lines of this: http://jsfiddle.net/XYZas/2

Also, check out this great tutorial: http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/