I'm trying to wrap my head around this concept.
Can you dumb this down for me and maybe provide a simple example of the difference between the el:
attribute and the tagName:
attribute?
In some examples, different views use el:
sometimes and others use tagName:
.
I'm specifically messing around with my own implementation of this example
The Backbone. js View el method defines the element that is used as the view reference. this. el is created from the view's tagName, className, id and attributes properties, if specified.
el is just an identifier and it refers to an element, a DOM element, which is a convention in that library.
BackboneJS is a lightweight JavaScript library that allows to develop and structure the client side applications that run in a web browser. It offers MVC framework which abstracts data into models, DOM into views and bind these two using events.
The difference is this:
el should be used to preserve a reference to the actual DOM node representing the view as a whole.
This means you can easily perform actions on it with jQuery or w/e. $(this.el).hide() or $(this.el).html('I am a Jquery Object now');
TagName is only a string that is used to determine the type of DOM node el will be. The default is div, but if you wanted, you could make it any HTML element you please.
Consider:
var view = Backbone.View.extend({
tagName: 'p',
initialize: function () {
_.bindAll(this, 'render');
},
render: function() {
$(this.el).html('I am a jQuery-ized paragraph');
return this;
}
});
$(document.body).append(new view().render().el);
The problem you might be running into is that sometimes you set el on the instantiation of a view, in which case the tagName is irrelevant:
var myView = new view({ el: $("someExistingEl") });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With