骨干：导航功能不起作用

Question

因此，出于某种原因导航无法在我的某个视图中工作。我现在正在一个文件中做所有事情，所以这可能是问题所在。此外，我知道代码非常糟糕，我现在只是乱搞主干。

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

此外，这是我从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到浏览器中，寄存器观点得到呈现，但无论我做什么点击事件似乎都不会工作...

Answer 1

由于处理函数route没有被调用，它是事件代表团可能不工作。

需要注意的一件事是，在骨干视图中设置的事件处理范围仅限于该视图的el。我没有看到你的显式设置，所以它可能会创建一个空的div，然后处理该空白div内的事件（你不需要）。

我用于快速原型的一个技巧是使用jQuery选择器指向页面上已存在的东西来设置视图的el，然后在render中用.show()显示它。

既然你不是那么做，那么你可以尝试一件事。我们正在做的是设置$el内容，然后调用delegateEvents以确保事件和处理程序正在绑定。

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