Question

I’m building a read only backbone app with data (sourced from a single static json file) that follows a building/campus structure of sort. That is:

[{
    "name": "Building Name",
    "id": "building",
    "floors":[{
        "name":"Ground Floor",
        "rooms":[{
            "name": "Room 1"
        },
        {
            "name": "Room 2"
        }]
    },
    {
        "name":"First Floor",
        "rooms":[{
            "name": "Room 3"
        },
        {
            "name": "Room 4"
        }]
    }]
    },
    {
    "name": "Another Building",
    "id": "building_2",
    "floors":[{
        "name":"Ground Floor",
        "rooms":[{

        }]
    },
    {
        "name":"First Floor",
        "rooms":[{

        }]
    }]
}]

I currently have a basic app set up that shows the list of buildings and floors for each building on a default ” route.

I would like to use the router so that APP/#buildingId/ shows the list of floors for a building with ‘buildingId’ and APP/#buildingId/#floorId shows the relevant list of rooms, etc.

JSBIN of my current code (without data.json) – http://jsbin.com/welcome/5850/edit

Lots of code is probably obsolete, but I was trying different ways to structure the models/collections. This app will never be more than read-only which is why I went with a static file.

---

Similar problem: How to use JSON to power interactive Backbone.js app

The solution presented doesn’t use the Router at all.

Answer 1

Is this what you are asking for?:

// code simplified and no tested
App.Router = Backbone.Router.extend({

  routes: {
    "/APP/:buildingId/:floorId":  "showRooms",
    "/APP/:buildingId":           "showFloors"
  },

  showRooms: function( buildingId, floorId ) {
    // code to show the rooms
  },

  showFloors: function( buildingId ) {
    // code to show the floors
  },

});

Or am I missing something?