Backbone: Navigate function not working

Question

So for some reason navigate won't work in one of my views. I'm doing everything in one file for now, so that may be the problem. Also I know the code is horrible, I'm just messing around with backbone right now.

EDIT: I put a console.log() in MarketingPage's function route and it never gets called, so there must be something wrong with the view.

Also, this is the error I'm getting from chrome dev tools:

Error in event handler for 'undefined': IndexSizeError: DOM Exception 1 Error: Index or size was negative, or greater than the allowed value.
    at P (chrome-extension://mgijmajocgfcbeboacabfgobmjgjcoja/content_js_min.js:16:142)
    at null.<anonymous> (chrome-extension://mgijmajocgfcbeboacabfgobmjgjcoja/content_js_min.js:18:417)
    at chrome-extension://mgijmajocgfcbeboacabfgobmjgjcoja/content_js_min.js:1:182
    at miscellaneous_bindings:288:9
    at chrome.Event.dispatchToListener (event_bindings:390:21)
    at chrome.Event.dispatch_ (event_bindings:376:27)
    at chrome.Event.dispatch (event_bindings:396:17)
    at Object.chromeHidden.Port.dispatchOnMessage (miscellaneous_bindings:254:22)

Here's my code:

/*global public, $*/


window.public = {
    Models: {},
    Collections: {},
    Views: {},
    Routers: {

    },
    init: function () {
        console.log('Hello from Backbone!');
    }
};

var App = Backbone.Router.extend({
    routes: {
        '': 'index',
        'register': 'route_register',
    },

    index: function(){
        var marketing_page = new MarketingPage();
    },

    route_register: function(){
        var register_view = new RegisterView();
    }
});

window.app = new App();

var User = Backbone.Model.extend({
    url: '/user',
    defaults: {
        email: '',
        password: ''
    }
});

var MarketingPage = Backbone.View.extend({
    initialize: function(){
    this.render();
  },
  render: function(){
    var template = _.template($("#marketing-page").html());
        $('.search-box').after(template);
  },
  events: {
    'dblclick': 'route'
  },
  route: function(e){
      e.preventDefault();
      console.log("In route");
      window.app.navigate('register', {trigger: true});
      this.remove();
  }
});

var RegisterView = Backbone.View.extend({
    initialize: function() {
        this.render();
    },
    render: function(){
        var template = _.template($("#register-template").html());
        $('.search-box').after(template);
    }
});

$(document).ready(function () {
    Backbone.history.start();
});

When I type host/#register into the browser directly, the register view gets rendered, but no matter what I do the click event won't seem to work...

score 0 · Accepted Answer · edited May 23 '17 at 12:14

Since the handler function route isn't being called, it's likely that the event delegation isn't working.

One thing to note is that the event handling that is set up in a Backbone View is scoped to only that view's el. I don't see where yours is set up explicitly, so it might be creating an empty div, then handling events inside that empty div (which you don't want).

One trick I use for quick prototypes is to set the view's el with a jQuery selector pointing to something that exists on the page already, then in the render, show it with a .show().

Since you're not really doing that, here's one thing you could try. What we're doing is setting the $el content and then calling delegateEvents to make sure that the events and handlers are being bound.

var MarketingPage = Backbone.View.extend({
  initialize: function(){
    this.render();
  },
  render: function(){
    this.$el.html(_.template($("#marketing-page").html()));
    $('.search-box').after(this.$el);
    this.delegateEvents();
  },
  events: {
    'dblclick': 'route'
  },
  route: function(e){
      e.preventDefault();
      console.log("In route");
      window.app.navigate('register', {trigger: true});
      this.remove();
  }
});

Backbone.js views delegateEvents do not get bound (sometimes)

http://backbonejs.org/#View-delegateEvents

Is the `#marketing-page` and `#register-template` already in the page and visible? — burin, May 15 '13 at 02:59

Backbone: Navigate function not working

1 Answers1