骨干网.js提供全局 el 与在对象中传递它

Question

我正在尝试学习 Backbone.js我对将 el 传递到视图对象或创建全局变量感到困惑。 我想说的是：

var CarsView = Backbone.View.extend({
tagName: "ul",
render: function(){
var self=this;
this.model.each(function(car){
var carView = new CarView({ model:car });
self.$el.append(carView.render().$el)
});
return this;
}
});
var cars = new Cars([
new Car({ id: 1, registrationNumber: "XLI887"}),
new Car({ id: 2, registrationNumber: "ZNP123"}),
new Car({ id: 3, registrationNumber: "XUV456"})
]);
var carsView = new CarsView({ el:"#container", model: cars });

当我这样做时，不会创建<ul>，我必须将我的容器标签更改为<ul>。 所以我得到这个：

<div id="songs">
<li id="1">Blue in Green</li>
<li id="2">So what </li>
<li id="3">All blues</li>
</div>

但是，如果我这样做：

var CarsView = Backbone.View.extend({
tagName: "ul",
render: function(){
var self=this;
this.model.each(function(car){
var carView = new CarView({ model:car });
self.$el.append(carView.render().$el)
});
return this;
}
});
var cars = new Cars([
new Car({ id: 1, registrationNumber: "XLI887"}),
new Car({ id: 2, registrationNumber: "ZNP123"}),
new Car({ id: 3, registrationNumber: "XUV456"})
]);
var carsView = new CarsView({ model:cars });
$("#container").html(carsView.render().$el);

在检查元素时，我得到这个：

<div id="container">
<ul>
<li id="1">XLI887<button class="delete">Delete</button></li>
<li id="2">ZNP123<button class="delete">Delete</button></li>
<li id="3">XUV456<button class="delete">Delete</button></li>
</ul>
</div>

这是mt CarView：

var CarView = Backbone.View.extend({
tagName: "li",
render: function(){
this.$el.html(this.model.get("registrationNumber"));
this.$el.append("<button>Delete</button>");
this.$el.attr("id", this.model.id);
return this;
}
});

一方面，我得到了容器标签，另一方面我没有。我认为这可能是由于 el 作为全局而不是视图对象传递，但情况似乎并非如此。

Answer 1

当你传递选项el时，就像{ el:"#container"}一样，你是在告诉主干这个视图实例的根元素是DOM中的现有元素，所以主干不会创建根元素。

当你不传递el选项时，主干会为你创建一个根元素(在内存中，还没有在DOM中(，这是它尊重其他选项的时候，比如tagName: "ul",自定义它将为你创建的元素。

Imo 第二种方法将使您免于许多典型的错误，因此您应该这样做，除非您真的想为 DOM 中的现有元素提供行为，例如服务器渲染的内容。

---

一些小的改进：

var CarsView = Backbone.View.extend({
tagName: "ul",
render: function() {
this.collection.each(function(car) {
var carView = new CarView({
model: car
});
this.$el.append(carView.render().$el)
}, this);
return this;
}
});
var cars = new Cars([{
id: 1,
registrationNumber: "XLI887"
},
{
id: 2,
registrationNumber: "ZNP123"
},
{
id: 3,
registrationNumber: "XUV456"
}]);
var carsView = new CarsView({
collection: cars
});
$("#container").html(carsView.render().$el);