Basic usage of views

Backbone views are the tools that provide a logical structure to the HTML markup of your application. Views represent the data of Backbone models or collections via JavaScript templates. For any change in the associated model or collection, you do not need to redraw the complete page, only update the relevant view—that's it. A basic view can be defined this way:

var UserView = Backbone.View.extend({
  render: function () {
    var html = "Backbone.js rocks!";
    this.$el.html(html);
    return this;
  }
});

// create an instance
var userView = new UserView();
$('#container').append(userView.render().el);

Here we created a simple HTML markup, placed it inside this view's element, and showed the view in the DOM. Let's understand the concept further by looking at all the steps.

Understanding the el property

What is the this.$el property? It is the property that points to the jQuery-wrapped version of el. Every view possesses an el property that either holds a DOM reference...