Javascript 主干视图：el和事件_Javascript_Jquery_Backbone.js

Javascript 主干视图：el和事件

javascript jquery backbone.js

Javascript 主干视图：el和事件,javascript,jquery,backbone.js,Javascript,Jquery,Backbone.js,我试图玩弄我的脊梁骨，对观点，尤其是“el”和事件有困难。我注意到我不是第一个，但不幸的是，我找不到最佳答案来回答我的问题我的基本相关代码： HTML: 请开导我！：）您遇到的具体问题是，this.el不是jQuery对象，它没有.html方法。这就是这个。$el的用途this.el是原始DOM元素，this.el是该对象的jQuery包装版本。您不应使用jQuery所选元素覆盖el 您遇到的真正问题是您试图在initialize中修改DOM 如果在initialize中，您希望访问已经在D

我试图玩弄我的脊梁骨，对观点，尤其是“el”和事件有困难。我注意到我不是第一个，但不幸的是，我找不到最佳答案来回答我的问题

我的基本相关代码：

HTML:

请开导我！：）

您遇到的具体问题是，

this.el

不是jQuery对象，它没有

.html

方法。这就是这个。$el的用途

this.el

是原始DOM元素，

this.el

是该对象的jQuery包装版本。您不应使用jQuery所选元素覆盖

el

您遇到的真正问题是您试图在

initialize

中修改DOM

如果在

initialize

中，您希望访问已经在DOM中的DOM元素，则需要将

el:

选项传递给视图的构造函数。一般来说，你不应该这样做。视图应该在其

render

方法中进行DOM操作

发件人：

如果要创建引用DOM中已有元素的视图，请将该元素作为选项传入：

newview（{el:existingElement}）

在实践中，我发现

el

和

$el

仍然可用，但无论如何都应该避免在

initialize

中使用它们。坚持在

渲染

中修改DOM，这是视图的“绘图”代码的具体用途：

var-view=Backbone.view.extend({
el:“#登录”，
渲染：函数（）{
这个.$el.append（'What！'）；
归还这个；
}
});
$（函数（）{
新建视图（）.render（）；
});

至于问题2，如果您在视图中直接处理这个.el
，那么您的事件将被破坏，因为delegateEvents
不会被调用以将事件附加到新的el
。但是，如果您使用更改el
，将设置所有内容：新建el
、新建$el
、调用delegateEvents，以移动事件绑定。看起来我在这里丢失了一些详细信息。关于el和$el，似乎有很多相互矛盾的信息。在TODO示例（来自主干网官方网站：）中，我们有这样一个配置：el:$（“#todoapp”）！还有其他的例子，例如创建视图的典型方式（新视图（{el:$（“#container”）}），你说这是错误的。真相是什么？：@Aleks我直接从当前文档中引用，要么接受，要么离开it@meagar我很久以前就看过了，但正如我所说的，这些信息似乎相互矛盾。如果你只能说“要么接受，要么离开”，那么我就离开。
<!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 
        }
.....

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
        }
.....

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