How to create this web application using Backbone.js?

Question

I'm struggling to make out collections, models, etc. in backbone.

Let's say an application consists of a sidebar, a Timeslider graph, and a column:

To provide some background, I previously implemented the columnChart class using the functional inheritance pattern:

namespace.columnChart = function() { var chart = {}; var width = 500; var height = 500; var data = []; chart.setState = function(state){ data = state.data; updateVis(); } function updateVis(){ ... render chart based on state ... } return chart; } 

With a simple binding, I can call the setState method on the Chart column when, for example, it adds a new object from the sidebar. But as the model grows (and the state becomes more complex with variables such as year, currentSelection, chartType, etc.), which I would also like to reflect in the URL, I would like to use MVC and, in particular, Backbone .js.

• So how do I structure this in a backbone?
  • Should I rewrite the columnChart class (and similar classes)?
  • Is there an easy way to determine what has changed in a state and only set a new state using these parameters?

An example of snapping Sidebar, Timeslider, and Column charts together - using Backbone - would be greatly appreciated.

Thanks.

Answer 1

I would subclass Backbone.Model called DataSet , which represents each item in the list to the left of the checkboxes. It must have a showInGraph boolean flag. You create a subclass of Backbone.Collection to represent the full set of possible data elements on the left. Populate this collection with DataSet instances for all features. Then each element gets 2 separate subclasses of Backbone.View. One is OptionView , which simply displays a checkbox and whether it is checked (the attribute of the element of the input HTML element is shown, based on whether showInGraph true). This will also require an event handler associated with the onChange attribute of this flag to switch showInGraph . The backbone automatically propagates this change and re-displays the views for you. Use this in the left hand div and associate it with the set of all available data sets.

The second subclass of the view is ChartView , which displays the item in the chart if its showInGraph attribute is true, otherwise it just ignores it.

Take it step by step. First, just make a left list of checkboxes. It should be simple, following the basic documents. Then try making a simple <ul> on the right with the <li> for each dataset that has showInGraph true, but nothing if showInGraph is false. Moving from there to the chart is just a matter of improving the image in the ChartView .

Try it and see if you can make some progress. Post another comment if you are stuck or need clarification.