javascript - Backbone.js提供全局el与将其传递给对象

我正在尝试学习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作为全局变量而不是在视图对象中传递的原因，但事实并非如此。

最佳答案

当您像el这样传递选项{ el:"#container"}时，您在告诉主干该视图实例的Root元素是DOM中的现有元素，因此主干不会创建根元素。

当您不传递el选项时，主干将为您创建一个Root元素（在内存中，而不是在DOM中），这是当它遵循诸如tagName: "ul",之类的其他选项来自定义将为您创建的元素时。

另外，第二种方法可以使您避免许多典型的错误，因此您应该采用这种方式，除非您真的希望对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);

关于javascript - Backbone.js提供全局el与将其传递给对象，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59210738/