Working with Views | Backbone.js Patterns and Best Practices

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

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Backbone.js Patterns and Best Practices

By : Swarnendu De

Backbone.js Patterns and Best Practices

By: Swarnendu De

Overview of this book

Basic usage of views

Understanding the el property

Backbone.js Patterns and Best Practices

By : Swarnendu De

Backbone.js Patterns and Best Practices

By: Swarnendu De

Overview of this book

Basic usage of views

Understanding the el property

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access