CODEWITHSUNDEEP
javascriptbackbone.js
Vai
Vai

Reputation: 353

Backbone.js providing global el vs passing it in object

I am trying to learn Backbone.js and I am confused with the passing the el into the object of the view or creating a global variable. What I mean to say is:

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 });

When I do this, the <ul> is not created and I have to change my container tag to <ul>. So I get this:

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

However if I do:

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);

On inspecting element I get this:

<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>

Here is 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;
    }
});

On one side I am getting the in the container tag and on the other hand I am not. I thought it might by due to the passing of the el as a global instead of in the view object but that does not seem to be the case.

Upvotes: 0

Views: 28

Answers (1)

T J
T J

Reputation: 43166

When you pass option el like { el:"#container"} you are telling backbone that the Root element of this view instance is an existing element in DOM, so backbone won't create a root element.

When you don't pass el option, backbone will create a Root element for you (in memory, not yet in DOM), which is when it respects other options like tagName: "ul", for customising the element it will be creating for you.

Imo the second method will save you from a lot of typical bugs so you should go that way, unless you really really want to give behaviour to an existing element in DOM, like server rendered content.

Some small improvements:

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);

Upvotes: 1

Related Questions