Backbone.js：手动定义 el 与使用 id 自动定义

Question

我的问题很简单。为什么以下工作有效（即单击黑色方块时显示警报）：

$(document).on('ready', function() {
 var MainView = Backbone.View.extend({
  
        el : "#id",
      
  events : {
   "click" : function() {
    alert("this works");
   }
  },

 });
 var main_view = new MainView();
});

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/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.2.1/backbone-min.js">
</script>
<style>
  #id {
  width : 10vw;
  height : 10vh;
  background-color : #000000;
}
</style>
</head>
<body>
<div id="id">
</div>
</body>
</html>

但以下不是：

$(document).on('ready', function() {
 var MainView = Backbone.View.extend({
  
        id : "id",
      
  events : {
   "click" : function() {
    alert("this works");
   }
  },

 });
 var main_view = new MainView();
});

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/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.2.1/backbone-min.js">
</script>
<style>
  #id {
  width : 10vw;
  height : 10vh;
  background-color : #000000;
}
</style>
</head>
<body>
<div id="id">
</div>
</body>
</html>

来自 backbone 文档网站：

"this.el can be resolved from a DOM selector string or an Element; otherwise it will be created from the view's tagName, className, id and attributes properties".

这里没有任何迹象表明如果我不手动设置 el 事件将无法绑定...

此外，在创建后检查 main_view 对象表明两种情况下的 el 表面上是相同的。当 el 从 id 推断出来时，为什么在第二个例子中点击没有被绑定？ backbone 有什么哲学是我在这里遗漏的吗？

Answer 1

el 的文档是这样说的：

this.el can be resolved from a DOM selector string or an Element; otherwise it will be created from the view's tagName ...

强调我的。

因此，如果您有此看法：

el: 'some-selector-string'

然后 Backbone 将在 DOM 中查找该选择器并将找到的内容用作 el：即它将解析 DOM 节点的选择器并将该节点用作最终的 el 和 Backbone 假定它正在使用现有节点。

如果你有这个：

id: 'id',
tagName: 'div',
...

在您看来，然后 Backbone 将根据这些属性创建 el。请注意，它只说它将创建 el，而没有说 el 将添加到 DOM。如果 Backbone 创建 el 那么它希望您将它添加到页面。

在这两种情况下，您的视图中都会有一个 el，但只有第一种情况 (el: 'selector') 会给您一个实际在页面上的 el。

如果您要让 Backbone 从 id、tagName 和朋友创建 el，则需要添加 el 到你自己的页面。常见模式如下所示：

// In the view...
render: function() {
    this.$el.html('whatever goes inside the el');
    return this;
}

// And then outside the view
var v = new YourView;
$('some-container-element').append(v.render().el);
// Now the el is on the page and usable ------^^

如果您要求 Backbone 在您的视图中创建带有 id: 'some-id' 的 el，并且页面上已经有 <div id="some-id">，那么您最终会得到两个 #some-id 节点：一个在页面上，一个仅在您的视图中。视图的事件始终通过视图的 el 绑定，因此页面上的 #some-id 上不会有任何事件。

Backbone.js：手动定义 el 与使用 id 自动定义

Backbone.js: defining el manually vs. automatically with id

backbone.js

backbone-views