How to build this web app with Backbone.js?

Question

I'm struggling to get my head around collections, models etc. in Backbone.

Let's say the app consists of a Sidebar, a Timeslider and a Column chart:

To provide some background, I've 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 simple binding I can call the setState method on the columnChart when for example adding a new entity from the sidebar. But as the model grows (and the state gets more complex with variables like year, currentSelection, chartType etc.) - which I'd also like reflected in the URL - I'd like to make use of MVC and specifically Backbone.js.

1. So how do I structure this in Backbone?
   • Should I rewrite my columnChart class (and similar classes)?
   • Is there an easy way to detect what has changed in the state and only set the new state using these params?

An example of tying the Sidebar, Timeslider and Column chart together - using Backbone - would be much appreciated.

Thanks.

Answer 1

I would make a subclass of Backbone.Model called DataSet that represents each item in the left hand list of checkboxes. This should have a boolean flag called showInGraph. You create a Backbone.Collection subclass to represent the full set of possible data items in the left hand section. Populate this collection with instances of your DataSet for all possibilities. Then each item gets 2 distinct Backbone.View subclasses. One is OptionView which simply renders the checkbox and whether or not it is checked (rendering the HTML input element's checked attribute based on whether showInGraph is true). This will also need an event handler bound to the onChange attribute of the checkbox to toggle showInGraph. Backbone will automatically propagate that change and re-render the views for you. Use this in the left hand div and associate it with the collection of all available data sets.

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

Take it step by step. First just make the left hand list of checkboxes. That should be straightforward following the backbone docs. Then try to make just a simple <ul> on the right with an <li> for each data set that has showInGraph true but nothing if showInGraph is false. Going from there to the chart is just a matter of fancier rendering in the ChartView view.

Try that out and see if you can make some progress. Post another comment if you get stuck or need clarification.