骨干视图：el和事件

Question

我正在尝试使用Backbone，并且在Views方面遇到麻烦，尤其是在“ 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 config中指定事件，则该事件永远不会触发：

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

请赐教！ :)

Answer 1

您遇到的特定问题是this.el不是jQuery对象，并且没有.html方法。 这就是this.$el this.el是原始的DOM元素，而this.$el是该对象的jQuery包装版本。 您不应该使用jQuery选择的元素覆盖el 。

您遇到的真正问题是您试图在initialize修改DOM。

如果在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>

骨干视图：el和事件

问题描述

1 个解决方案

解决方案1
2 2015-01-29 13:53:45

骨干视图：el和事件

问题描述

1 个解决方案

解决方案1 2 2015-01-29 13:53:45

解决方案1
2 2015-01-29 13:53:45