Unbreakable Unbreakable - 4 months ago 32
Javascript Question

Difference between el and tagname in backbone

I am learning Backbone and I am not able to understand the difference between el and tagname. I looked into this BackboneJs: In a view whats the difference between el: and tagName: . But I could not understand.

Below is what I have till now.

Script Example:

// Vehicle Model
var Vehicle = Backbone.Model.extend(
{
idAttribute: "registrationNumber",
urlRoot: "/api/vehicles",
validate: function(attrs)
{
if(!attrs.registrationNumber)
return "Vehicle without reistration";

}
});

// Vehicle Collection
var Vehicles = Backbone.Collection.extend(
{
model: Vehicle
});

// Vehicle View
var VehicleView = Backbone.View.extend(
{
tagName: "li",
//*******************************************************
// el: "li" **THIS DOES NOT WORK!!
//**********************************************************
render: function ()
{
var source = $("#vehicleTemplate").html();
var template = _.template(source);
this.$el.html(template(this.model.toJSON()));
return this;
}
});

// Vehicle View for collection
var VehiclesView = Backbone.View.extend({
render: function() {
var self = this;
this.collection.each(function(vehicle) {
var vehicleView = new VehicleView({
model: vehicle
});
self.$el.append(vehicleView.render().$el);
});
}
});

// creating collection
var vehicles = new Vehicles(
[
new Vehicle({registrationNumber: "ABCD1234"}),
new Vehicle({registrationNumber: "ABCD5678"}),
new Vehicle({registrationNumber: "DCBA1234"}),
new Vehicle({registrationNumber: "DCBA1423"})
]);

// instance for vehicles View
var vehiclesView = new VehiclesView({collection: vehicles, el: "#vehicleAnchor"});
vehiclesView.render();


Index.html

<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/styles.css">

<script src="js/lib/modernizr-2.6.2.min.js"></script>
</head>
<body>
<ul id = "vehicleAnchor">
</ul>
<script src="js/lib/jquery-min.js"></script>
<script src="js/lib/underscore-min.js"></script>
<script src="js/lib/backbone-min.js"></script>

<script id = "vehicleTemplate" type = "text/html">
<%= registrationNumber%>
</script>
<script src="js/main.js"></script>
</body>
</html>


Everything is working fine but when I replace
tagName with el
, it stops working Why please guide me in layman language.

Answer

According to the documentation (http://backbonejs.org/#View-el), the el property is used as a reference to the DOM element, whereas the tagName is used when creating an element.

This means that when you specify a string as the el it will look in the existing DOM tree (basically your HTML) for an element that matches that selector (it will function as a jquery selector). Since you do not have an li element in your markup, the el will be null and the view will be unable to initialize.

When you are using the tagName on the other hand, backbone automatically uses that to create a new element and assign it to the el property.
Be aware however, that the newly created element must then be added to the DOM. This is what you do in VehiclesView with the line self.$el.append(vehicleView.render().$el);

Comments