jQuery 和 Backbone 单击事件未触发

Question

我知道这个问题出现了一百万次，但我已经浏览了所有答案，但没有一个有帮助。

JS fiddle :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});

在 fiddle 中，当我绑定(bind)普通的 $('#login-btn').click(); 时事件它工作正常，尽管它不在我自己的设置中(使用chrome)。主干点击事件不起作用。

这就是我自己的代码中标题的样子

<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>

我知道最好的做法是将它们包含在页脚中，但目前虽然存在这个问题，但这并不重要(？)。

Answer 1

您将像这样设置 View 元素:

var LoginView = Backbone.View.extend({
  initialize: function() {
    this.el = $('#login-container');
  }
});

每个 Backbone View 都会获得一个分离的 DOM 节点作为其 el创建时。当您设置this.el时这样，Backbone 并不知道您已更改元素，并且仍在监听原始分离节点上的事件。

尝试声明 el相反， View 上的属性。这是将 View 绑定(bind)到预先存在的元素的正确方法:

var LoginView = Backbone.View.extend({
  el: "#login-container",
});

如果需要设置 View 的el在 View 的生命周期中动态地，您应该使用 view.setElement ，这使得 Backbone 能够绑定(bind) events到新元素:

var LoginView = Backbone.View.extend({
  initialize: function() {
    this.setElement($('#login-container'));
  }
});

根据评论进行编辑: 听起来您正在尝试在页面完全加载之前初始化 View 。主干网找不到 #login-container元素，因此不绑定(bind)事件。您也可以用 fiddle 验证这一点:更改 onLoad设置为No wrap <in head>在 fiddle 设置中，您瞧，没有处理任何事件。

您应该只在 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});      
});