Question

因此，出于某种原因，导航将无法在我的一个视图中使用。我现在正在一个文件中做所有事情，所以这可能是问题所在。我也知道代码太可怕了，我现在只是乱用骨干。

编辑：我在MarketingPage的函数console.log()中放了一个route，它永远不会被调用，所以视图一定有问题。

另外，这是我从chrome dev工具中得到的错误：

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时，会显示注册视图，但无论我做什么，点击事件似乎都不起作用......

Answer 1

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

需要注意的一点是，在Backbone View中设置的事件处理仅限于该视图的el。我没有看到你的显式设置在哪里，所以它可能是创建一个空div，然后处理那个空div（你不想要的）里面的事件。

我用于快速原型的一个技巧是设置视图的el，其中jQuery选择器指向已存在于页面上的内容，然后在render中显示{{1} }}

既然你没有真正这样做，那么你可以尝试一件事。我们正在做的是设置.show()内容，然后调用$el以确保事件和处理程序被绑定。

delegateEvents

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

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

Backbone：导航功能不起作用

1 个答案: