BackboneJs: In a view whats the difference between

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

Answer 1

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.

Answer 2

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