backbone.jsHow do I use Backbone.js to bind data to a view?

Backbone.js is an MVC framework that allows you to bind data to a view. To do this, you must first create a Model object that will contain the data. Then, you must create a View object that will render the data. Finally, you must bind the Model to the View using the Backbone.View.listenTo() method.

Example code

// create a Model object
var MyModel = Backbone.Model.extend({
    defaults: {
        name: 'John Doe',
        age: 30
    }
});

// create a View object
var MyView = Backbone.View.extend({
    render: function() {
        this.$el.html(this.model.get('name') + ' is ' + this.model.get('age') + ' years old.');
    }
});

// create a new instance of the Model
var model = new MyModel();

// create a new instance of the View
var view = new MyView({
    model: model
});

// bind the Model to the View
view.listenTo(model, 'change', view.render);

Output example

None

Code explanation

1. MyModel is a Model object that contains the data to be rendered.
2. MyView is a View object that will render the data.
3. model is a new instance of the Model.
4. view is a new instance of the View, with the model as a parameter.
5. view.listenTo() binds the Model to the View.

Helpful links

• Backbone.js
• Backbone.View.listenTo()

Edit this code on GitHub