BackboneJs: In a view whats the difference between el: and tagName:

Question

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

Answer 1

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

Answer 2

var View = Backbone.View.extend({
  tagName: 'span',
  id: 'identity',
  class: 'classy',
  el: $(this.tagName), // or
  el: $('<' + this.tagName + ' />', {
    id: this.id,       // identity
    'class': this.class  // classy
  })  // this is jQuery shorthand for building an element fyi
});

var view = new View();

I think that should work fine.