backbone.jsHow do I create a view in Backbone.js?

To create a view in Backbone.js, you must define a view class that extends from the Backbone.View class. The view class should have a render() method, which is responsible for generating HTML for the view. Additionally, the view class should have an events object, which maps DOM events to view methods.

Example view class:

var MyView = Backbone.View.extend({
    // Define a render method
    render: function() {
        // Generate HTML for the view
        this.$el.html('<h1>My View</h1>');
        return this;
    },
    // Define an events object
    events: {
        'click h1': 'onHeadingClick'
    },
    // Define a view method
    onHeadingClick: function() {
        console.log('Heading clicked');
    }
});

Output example

Heading clicked when the h1 element is clicked.

Code explanation

• MyView: The view class name.
• Backbone.View.extend: The constructor used to create the view class.
• render: The view method responsible for generating HTML for the view.
• events: The object that maps DOM events to view methods.
• onHeadingClick: The view method that is called when the h1 element is clicked.

Helpful links

• Backbone.js Documentation
• Backbone.View Documentation

Edit this code on GitHub