javascript - Backbone : Navigate function not working

Question

因此，由于某种原因，导航在我的 View 之一中不起作用。我现在正在一个文件中完成所有操作，所以这可能是问题所在。我也知道代码很糟糕，我现在只是在搞主干。

编辑:我在 MarketingPage 的函数 route 中放置了一个 console.log() ，但它从未被调用，因此 View 肯定有问题。

此外，这是我从 chrome 开发工具中收到的错误:

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)

这是我的代码:

/*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();
});

当我直接在浏览器中输入 host/#register 时，会呈现注册 View ，但无论我做什么，单击事件似乎都不起作用...

Answer 1

由于未调用处理函数 route，因此事件委托(delegate)可能无法正常工作。

需要注意的一件事是，在主干 View 中设置的事件处理的范围仅限于该 View 的 el。我没有看到你的显式设置位置，因此它可能会创建一个空 div，然后处理该空 div 内的事件(你不想要的)。

我用于快速原型(prototype)的一个技巧是使用指向页面上已经存在的内容的 jQuery 选择器设置 View 的 el，然后在 render 中显示它与 .show().

由于您并没有真正这样做，因此您可以尝试以下一件事。我们正在做的是设置 $el 内容，然后调用 delegateEvents 以确保事件和处理程序已绑定(bind)。

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