backbone.jsHow can I extend a Backbone.js application?

Extending a Backbone.js application can be done by creating custom views, models, collections, and routers.

Custom views allow you to create custom UI elements, such as a custom button or a custom form. For example, you can create a custom view with the following code:

var CustomView = Backbone.View.extend({
  render: function() {
    this.$el.html("<button>My Custom Button</button>");
    return this;
  }
});

Custom models allow you to create custom data models, such as a user model or a product model. For example, you can create a custom model with the following code:

var User = Backbone.Model.extend({
  defaults: {
    name: '',
    age: 0
  }
});

var user = new User({ name: 'John', age: 30 });
console.log(user.get('name')); // Outputs 'John'

Custom collections allow you to create custom collections of models, such as a list of users or a list of products. For example, you can create a custom collection with the following code:

var Users = Backbone.Collection.extend({
  model: User
});

var users = new Users([
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 }
]);
console.log(users.length); // Outputs 2

Custom routers allow you to create custom routes, such as a route to a product page or a route to a user profile page. For example, you can create a custom router with the following code:

var Router = Backbone.Router.extend({
  routes: {
    'products': 'showProducts',
    'users/:id': 'showUser'
  },

  showProducts: function() {
    console.log('Showing products');
  },

  showUser: function(id) {
    console.log('Showing user with id ' + id);
  }
});

var router = new Router();
Backbone.history.start();

These are the main ways to extend a Backbone.js application. For more information, please see the official Backbone.js documentation.

Edit this code on GitHub