我正在学习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,但事实似乎并非如此。
1条答案
按热度按时间wz3gfoph1#
当你传递选项
el
(如{ el:"#container"}
)时,你是在告诉backbone这个视图示例的根元素是DOM
中的一个现有元素,所以backbone不会创建一个根元素。当你没有传递
el
选项时,backbone会为你创建一个Root元素(在内存中,而不是在DOM中),这是当它考虑其他选项(如tagName: "ul",
)来定制它将为你创建的元素时。第二种方法可以保存很多典型的bug,所以你应该这样做,除非你真的想为DOM中的现有元素给予行为,比如服务器呈现的内容。
一些小的改进: