12

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

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(); 事件它工作正常，虽然它不在我自己的设置中（使用 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>

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

4

4 回答 4

33

您正在像这样设置 View 元素：

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

每个 Backbone 视图el在创建时都会获得一个分离的 DOM 节点。当您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});      
});
于 2013-03-01T13:15:02.253 回答
5

我必须在没有 jQuery 的情况下设置el才能在 JSFiddle 中工作... el: 'body'

于 2013-10-08T16:08:53.060 回答
1

正如其他答案所解释的，events要工作，您需要使用el属性。el属性对于通过引用属性中的元素来注册事件是必要的el。但在某些情况下，尚未生成 html。在这些情况下，您可以使用tagName而不是el. tagName对于动态生成元素很有用，就像document.createElement.

于 2016-07-10T12:45:45.937 回答
-1

Backbones el Node 定义了视图控制器的工作区。只有 el 内部的节点会受到 Backbones 渲染方法的影响、监听或更改。

将 el 设置为尽可能靠近您希望与 View Controller 一起维护的区域，以避免与其他 View Controller 发生交叉或不必要的父子关系。

想象一下 View1 包括 View2 的区域并在其节点上进行渲染。如果 View2 持有节点的引用，它将不再工作，因为它们可能会被 View1 的渲染破坏。

因此，请注意查看交叉路口及其风险。Backbone 是一个库，而不是一个框架，它不会保护你免于做愚蠢的事情。

于 2016-11-23T07:55:20.360 回答