骨干视图:el和事件

Backbone view: el and events

本文关键字：事件 el 视图      更新时间：2023-09-26

我正在尝试使用Backbone，但在视图方面遇到了麻烦，特别是"el"和事件。我注意到我不是第一个，但不幸的是找不到我问题的最佳答案。

我的基本相关代码：

.HTML：

<!DOCTYPE html>
<html>
    <head>
        <script data-main="main" src="js/require.js"></script>
    </head>
    <body>
        <div id="login"></div>
    </body>
</html>

视图：

var view = Backbone.View.extend({
        el: $("#login"),
        initialize: function() {
            this.el.html('<div>click here</div>');         // TypeError: this.el.html is not a function 
        }
.....

问题1：

请注意 initialize（） 函数中的注释，这是我加载此代码时 Firebug 注册的错误。

但是，当我只删除"el"配置，而是将相应的赋值放在 initialize（） 中时，运行时错误就消失了！

var view = Backbone.View.extend({
            //  "el" is now removed 
        initialize: function() {
            this.el = $("#login");                       // explicit assignement
            this.el.html('<div>click here</div>');       // appends the div correctly
        }
.....

问题2：在这两个示例中，如果我在 View 的事件配置中指定事件，则事件永远不会触发：

events: {
            "click":          "tryLogin"
          },
          ...

请开导我！ :)

您遇到的具体问题是this.el不是 jQuery 对象，并且它没有.html方法。 这就是this.$el的目的; this.el是一个原始的 DOM 元素，this.$el是该对象的 jQuery 包装版本。您不应该用 jQuery 选择的元素覆盖el。

您

遇到的真正问题是您正在尝试修改 DOM initialize .

如果在 initialize 中，您想要访问 DOM 中已有的 DOM 元素，则需要将el:选项传递给视图的构造函数。一般来说，你不应该这样做。您的视图应该在其render方法中进行其 DOM 操作。

从文档中：

如果要创建引用 DOM 中已有元素的视图，请将该元素作为选项传入：new View({el: existingElement})

在实践中，我发现el和$el仍然可用，但无论如何，您应该避免在initialize中使用它们。坚持在 render 中修改 DOM，这是视图的"绘图"代码的具体位置：

var view = Backbone.View.extend({
  el: '#login',
  render: function () {
    this.$el.append('<h1>What!</h1>');
    return this;
  }
});
$(function () {
  new view().render();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<div id="login"></div>

关于问题2，我无法重现您的问题。以下内容完全符合预期：

var View = Backbone.View.extend({
  el: '#login',
  events: {
    'click': 'onClick'
  },
  onClick: function () {
    alert('click!');  
  },
  render: function () {
    this.$el.append('<h1>What!</h1>');
  }
});
new View().render();
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
    <div id="login"></div>

相关文章：