0

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.

Community
  • 1
  • 1
Milosz Falinski
  • 47
  • 5

1 Answers1

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?

fguillen
  • 36,125
  • 23
  • 149
  • 210
  • Yes, pretty much this. I arrived at this stage now, where I play around with router functions, but I can't figure out the code to correctly show the floors or rooms. See updated jsbin: http://jsbin.com/uzohuy/1/edit This kind of works. On path APP/#0, which is the id of first building it returns the object correctly, but I can't access any attributes from the template apart from name. All attributes (apart from name) return error: 'Uncaught ReferenceError: id is not defined'. I can access all the attributes from console with: 'singleBuilding.models[0].get('name')' – Milosz Falinski Jul 29 '12 at 20:25
  • @MiloszFalinski if I understand you are looking for a full implementation of a very personal case. I'm afraid this is out of the scope of StackOverflow. We can help you with more abstract and concrete issues non related with any concrete business logic. – fguillen Jul 29 '12 at 23:06
  • Thanks, I wasn't sure, but that's understandable. I got it mostly figured out by now, even though the code seems a bit hacky. Since your answer is pretty much what I went for, I'm happy to mark the question as answered. – Milosz Falinski Jul 30 '12 at 09:55