Question

我知道这个问题出现了一百万次，但我已经完成了答案，但没有一个能帮到你。

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>

我知道将这些包含在页脚中的最佳做法但是现在虽然存在这个问题并不重要（？）。

Answer 1

您正在设置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将events绑定到新元素：

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});      
});

Answer 2

我必须设置 el 而不使用jQuery才能在JSFiddle中工作... el：'body'

Answer 3

正如其他答案所解释的那样，要使events工作，您需要使用el属性。 el属性是通过引用el属性中的元素来注册事件的主干。但在某些情况下，html尚未生成。在这些情况下，您可以使用tagName代替el。 tagName可以像document.createElement一样动态生成元素。

Answer 4

Backbones el Node定义了View Controller的工作区。只有el内的节点才会受到影响，收听或改变Backbones render Method。

将el设置为尽可能靠近您要使用View Controller维护的区域，以避免与其他视图控制器交叉或不需要的父级。

想象一下View1包含View2区域并在其节点上渲染。如果View2拥有节点的引用，则它将不再起作用，因为它们可能会被View1中的渲染所打破。

因此请注意View Intersections及其风险。 Backbone是一个库，而不是一个框架，不会保护你不做蠢事。

jQuery＆amp;骨干点击事件未触发

4 个答案: