How To Handle A Simple Click Event In Backbone.js?

I am having difficulty with something very simple in Backbone. I want to wire up the

in my page so that when the user clicks on it, it returns seamlessly to the homepage

Solution 1:

If you enable pushState you need to intercept all clicks and prevent the refresh:

$('a').click(function (e) {
  e.preventDefault();
  app.router.navigate(e.target.pathname, true);
});

Something like:

$(document).ready(function(){

  varHomeView = Backbone.View.extend({
    initialize: function() { 
      console.log('initializing HomeView');
    }
  });

  varAboutView = Backbone.View.extend({
    initialize: function() { 
      console.log('initializing AboutView');
    }
  });

  varAppRouter = Backbone.Router.extend({
    routes: { 
      "": "index", 
      "about":"aboutView"
    },

    events: function () {
      $('a').click(function (e) {
        e.preventDefault();
        SearchApp.navigate(e.target.pathname, true);
      });
    },

    initialize: function(){
      console.log('initialize app');
      this.events();
      this.HomeView = newHomeView();
    },

    index: function(){
      this.HomeView = newHomeView();
    },

    aboutView : function() {
      this.AboutView = newAboutView();
    }
  });

  varSearchApp = newAppRouter();
  Backbone.history.start({pushState: true});

});

Solution 2:

Your tag id is invalid, try this:

<h1><aid="home"href="/">Home</a></h1>