Take the 2-minute tour ×

In my backbonejs application, the app automatically reloads the page to example.com/?stat=#users when I navigate to router.navigate('users')?

When I hit the back button it loads the url example.com/#users so it is accessing the desired page correctly then loading example.com/?stat=#users.

What is the issues I am running into, I've tried changing the trigger options but I am unable to fix it? And I am unable to find more information on what the ?state=#... is (I can make assumptions but concise documentation would be very helpful)?

A stripped down routes file:

class window.AppRouter extends Backbone.Router
    "": "list"
    "users": "list"
    "user/:id": "userDetails"

  list: -> 

  before: (callback) ->
    if @users?
      callback() if callback?
      @users = new Users
        success: ->
          $('#sidebar').html(new UsersView({model: app.users}).render().el)
          callback() if callback)

  userDetails: (id) -> 
    @before ->
      user = app.users.get( id)
      if user?
        console.log('inside if')
        app.showView( '#content', new UserView( {model: user}))

  showView: (selector, view) ->
    @currentView.close() if @currentView?
    @currentView = view
    return view

My stripped down view file:

class window.UsersView extends Backbone.View
  className: 'nav nav-pills nav-stacked'
  initialize: ->
    @userViews = new Array
    @model.bind("reset", @render, this)
    @model.bind("add", (user) =>
      @$el.append( new UserInListView({model: user}).render().el))

  render: (event) ->
      (user) =>
        userView = new UserInListView( {model: user})
        @userViews.push( userView)
        @$el.append( userView.render().el)
    return this

class window.UserInListView extends Backbone.View

  initialize: ->
    @template = _.template(tpl.get('user_in_list'))
    @model.bind("change", @render, this)
    @model.bind("destroy", @close, this)

  render: (event) ->
    @$el.html( @template( @model.toJSON()))
    return this

    "click a": "select"

  select: ->
    @$el.addClass( 'active')
    app.navigate("user/#{@model.id}", true)

class window.UserView extends Backbone.View
  initialize: ->
    templateName = 'user_edit'
    @template = _.template(tpl.get(templateName))
    @model.bind("change", @render, this)

    "click .cancel": "cancel"

  cancel: ->
    app.navigate('users', false)

I'm just not sure what is causing this, is it a binding? Is it twitter-bootstrap? Is it the way I set up my router? How come when I access the url directly I don't run into issues but when my router navigates me there I do?

share|improve this question
What is the code in router's user route's callback method ?? –  Cyclone Nov 2 '12 at 18:42
@Cyclone Ok, just expanded on the code. –  rudolph9 Nov 2 '12 at 19:56
I'm not sure what the problem is :( Have you made pushState : true while initializing router ? If yes, can you try without that ? And if app.navigate('users', false) is router navigation, then I don't think second parameter is not how it is passed, may be you can have a look at documentation. –  Cyclone Nov 3 '12 at 5:50
add comment

1 Answer

up vote 1 down vote accepted

The issue has to with including a name attribute on an <input> or <select> tag [and I'm sure others], by including the attribute in the tag the attribute is included in get requests so when navigate is called it accesses the desired page but then performs the GET request with what ever the name parameter may be.

In my case, I left a name='state' in a selector (which I realized after accessing a user which actually had their state i.e. the state they live in set and the url was example.com/?state=IL#users and this "state" was not pertinent to the state of the backbone page being accessed).

share|improve this answer
add comment

Your Answer


