Backbone.js - navigating to a route after the "click" event on a view

Question

My "view" is set up as below. simple.

var ItemView = Backbone.View.extend({
  tagName : "li",

  events : {
    "click" : "display"
  },

  display : function() {
    //app.navigate('item'); // take me to my route!
  }
});

And I have my router

var App = Backbone.Router.extend({

  routes: {
    "" : "index",
    "item" : "view_item"
  },

  index: function() {
    alert('hi!');
  },

  view_item: function() {
    alert('bye!');
  }
});

app = new App();
Backbone.history.start();

Now, when I click on ItemView, it should run "display" method and I want the display method to take me to the route I specified in routes "item".

Is this possible? I thought "navigate" function will work, but it doesn't. How could I achieve this?

Answer 1

 display : function() {
    app.navigate('item', true);
  }

You need the second parameter set to true.

From the Backbone documentation:

navigaterouter.navigate(fragment, [triggerRoute]) Whenever you reach a point in your application that you'd like to save as a URL, call navigate in order to update the URL. If you wish to also call the route function, pass triggerRoute.