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>

从骨干文档网站：

“this.el可以从DOM选择器字符串或元素中解析出来;否则它将从视图的tagName，className，id和attributes属性中创建。”

如果我没有手动设置el，那么这里没有任何内容表明事件将无法绑定...

此外，在创建之后检查main_view对象表明两种情况下的el表面上都是相同的。为什么在第二个例子中，当从id推断出el时，点击是否被绑定？我在这里缺少一些骨干哲学吗？

Answer 1

el的文档说明了这一点：

this.el可以从DOM选择器字符串或Element 解析;否则它将从视图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。< / p>

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

el

如果您要求Backbone在您的视图中使用// 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 ------^^创建el，并且页面上已经有id: 'some-id'，那么您最终会得到两个<div id="some-id">个节点：一个在页面上，一个只在您的视图中。视图的事件始终通过视图的#some-id进行约束，因此不会在页面上的el上显示任何事件。

Backbone.js：手动定义el与自动ID

1 个答案: