Question

I have Backbone App Here are codes :

This is Main.coffee :

require ["App/app","backbone"] ,(App,Backbone)->
app = new App()
Backbone.history.start()

This is app.coffee :

class AppRouter extends Backbone.Router 
    routes :
        "" : 'Base'
        "Browse/:id" : "Details"

    initialize : ->         
        @render()

    Browse : (id) ->
        console.log "Hello"
        stud = new Student({UserKey:id})
        stud.fetch({
            success :->
                $('#content').html new View({model:stud}).el
        })
        null

This is my View.coffee

define ['jquery'
    ,'underscore'
    ,'backbone'
    ,'text!/Templates/Student/View.htm'] , ($ , _ , Backbone , ViewTemplate) ->

class StdView extends Backbone.View

    #_.templateSettings = { interpolate: /\{\{(.+?)\}\}/g };

    #template : _.template(View)

    initialize : (options) ->           
        @render()

    render :->
        console.log @model.toJSON()
        #@setElement @template @model.toJSON()
        @

And This is my View Template ( For showing details of student)

  <input type="text" name="firstname" value="{{FirstName}}" placeholder="First Name" />
    <input type="text" name="lastname" value="{{LastName}}" placeholder="Last Name" />

The items are rendered into a table with a link from where i click on edit buttton to get the details . Here is the template portion where the ids get rendered .

 <td>
    <a class="btn btn-small btn-inverse" href="#browse/{{UserKey}}"><i class="icon-edit icon-white"></i></a>
</td>

Now i have started the Backbone.history.start() . But no way its going to the Browse method which it should go if i click on link for example as : /browse/1 . Its not happening . The link which is rendered on the browser when i click is like this

http://localhost:40921/#browse/5

So where is it after all going wrong ???????

Answer 1

Routes are case sensitive, you should have this:

routes :
    "" : 'Base'
    "browse/:id" : "Details"

if you want #browse/5 to do anything. Or keep your routes as they are now and change your link to use #Browse/5.

Demo: http://jsfiddle.net/ambiguous/NLzyS/

If you want a case insensitive route, you could add a regex route manually using route:

initialize: ->
    @route(/browse\/(\d+)/i, 'Details')

Demo: http://jsfiddle.net/ambiguous/2S6wr/