我知道这个问题出现了一百万次,但我已经通过了答案,没有一个帮助.
JS小提琴：http://jsfiddle.net/ZrYYy/
var LoginView = Backbone.View.extend({
initialize: function () {
console.log('Login View Intialized');
this.el = $('#login-container');
},// Setup the events (mainly the login)
events: {
// Login - function
"click #login-btn" : "checkLogin"
},// Actually authorization function
checkLogin: function() {
console.log("Authorizing login details with server...");
}
});
// Get it all up and going
var newLogin = new Login();
var loginView = new LoginView({model: newLogin});
在小提琴中,当我绑定一个正常的$(‘#login-btn’).click();事件它工作正常,虽然它不在我自己的设置(与铬).骨干点击事件无效.
<link href="assets/admin/css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="assets/admin/css/bootstrap-responsive.css" rel="stylesheet" type="text/css"> <link href="assets/admin/css/style.css" rel="stylesheet" type="text/css"> <script src="assets/admin/js/jquery-1.9.1.min.js"></script> <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script> <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script> <script src="assets/admin/backbone/login.js"></script> <script src="assets/admin/js/bootstrap.min.js"></script>
我知道最好的做法是将它们包括在页脚中,但是现在这个问题存在,这并不重要(？).
解决方法
您正在设置View元素：
var LoginView = Backbone.View.extend({
initialize: function() {
this.el = $('#login-container');
}
});
每个Backbone视图都会创建一个独立的DOM节点作为它的el.当您这样设置this.el时,Backbone不知道您已经更改了元素,并且仍在侦听原始分离节点上的事件.
尝试在视图上声明一个el属性.这是将视图绑定到预先存在的元素的正确方法：
var LoginView = Backbone.View.extend({
el: "#login-container",});
如果您需要在视图生命周期内动态设置视图的el,则应使用view.setElement,这将使Backbone将事件绑定到新元素：
var LoginView = Backbone.View.extend({
initialize: function() {
this.setElement($('#login-container'));
}
});
根据评论进行编辑：听起来您正在尝试在页面完全加载之前初始化视图. Backbone找不到#login-container元素,ergo不绑定事件.您也可以用你的小提琴来验证这一点：将onLoad设置更改为No wrap< in head>在小提琴设置中,并且看不到任何事件被处理.
您应该只有在DOM准备好之后初始化您的应用程序：
$(document).on('ready',function() {
var newLogin = new Login();
var loginView = new LoginView({model: newLogin});
});
或快捷方式相同：
$(function() {
var newLogin = new Login();
var loginView = new LoginView({model: newLogin});
});
