骨干视图：el和事件

Question

I am trying to play around with Backbone and have trouble with Views, in particular with "el" and events. 我正在尝试使用Backbone，并且在Views方面遇到麻烦，尤其是在“ el”和事件方面。 I noticed I'm not the first one, but unfortunatelly could not find an optimal answer to my questions. 我注意到我不是第一个，但是很遗憾找不到我的问题的最佳答案。

My base relevant code: 我的基本相关代码：

HTML: HTML：

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

VIEW: 视图：

var view = Backbone.View.extend({
        el: $("#login"),

        initialize: function() {
            this.el.html('<div>click here</div>');         // TypeError: this.el.html is not a function 
        }
.....

Question 1: 问题1：

Please note the comment in the initialize() function, that's error registered by Firebug when I load this code. 请注意initialize（）函数中的注释，这是我加载此代码时Firebug注册的错误。

But, when I only remove the "el" config and instead put the corresponding assignement in initialize() the run-time error is gone! 但是，当我仅删除“ 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
        }
.....

Question 2: In both of these examples if I specify events in View's events config, the event never fires: 问题2：在这两个示例中，如果我在View的events config中指定事件，则该事件永远不会触发：

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

Please enlighten me! 请赐教！ :) :)

Answer 1

The specific problem you're having is that this.el is not a jQuery object, and it has no .html method. 您遇到的特定问题是this.el不是jQuery对象，并且没有.html方法。 That's what this.$el is for; 这就是this.$el this.el is a raw DOM element and this.$el is the jQuery-wrapped version of that object. this.el是原始的DOM元素，而this.$el是该对象的jQuery包装版本。 You should not overwrite el with a jQuery-selected element. 您不应该使用jQuery选择的元素覆盖el 。

The real problem you're having is that you're trying to modify the DOM in initialize . 您遇到的真正问题是您试图在initialize修改DOM。

If, in initialize , you want to access a DOM element that is already in the DOM, you need to pass an el: option to the view's constructor. 如果在initialize ，要访问DOM中已经存在的DOM元素，则需要将el:选项传递给视图的构造函数。 Generally you shouldn't do this though. 通常，您不应该这样做。 Your view should do its DOM manipulation in its render method. 您的视图应在其render方法中执行其DOM操作。

From the docs : 从文档：

If you'd like to create a view that references an element already in the DOM, pass in the element as an option: new View({el: existingElement}) 如果您想创建一个引用DOM中已经存在的元素的视图，请将该元素作为选项传递： new View({el: existingElement})

In practice I've found that el and $el are still available, but you should avoid using them in initialize regardless. 在实践中，我发现el和$el仍然可用，但是无论如何都应避免在initialize使用它们。 Stick to modifying the DOM in render , which is specifically where your view's "drawing" code is meant to go: 坚持修改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>

In regards to Question 2, I cannot reproduce your problem. 关于问题2，我无法重提您的问题。 The following works exactly as expected: 以下内容完全符合预期：

 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