Backbone Model Example

Written by Backbone Tutorials Team

Last updated: June 2026 · 8 min read

A Backbone model is easiest to grasp when you watch it fire a change event and update the screen on its own. This page is a complete, runnable example: a model with default values and validation, a listener that re-renders whenever data changes, and a save call that talks to a REST endpoint. It uses Backbone.js 1.6.0, the same version referenced across this site.

If models are new to you, read what is a model in Backbone.js first, then run this to see the event system in action.

What this example builds

The example creates a single user model, prints its name whenever that name changes, rejects invalid updates, and persists the record to a REST API.

The behaviour you will see

Setting a new name on the model logs the updated value automatically, because a listener is bound to the model change event rather than being called by hand. An attempt to set an empty name is blocked by validation, and a save sends the data to the server as JSON. This is the model loop that every Backbone application is built on.

Defining the model

A model is declared by extending Backbone.Model and giving it default attribute values.

The model with defaults

var User = Backbone.Model.extend({
  urlRoot: "/api/users",
  defaults: {
    name: "Guest",
    active: true
  }
});

var user = new User({ name: "Ada" });
console.log(user.get("name")); // "Ada"
console.log(user.get("active")); // true (from defaults)

Reacting to change events

The defining feature of a model is that changing it emits an event other code can listen to.

Binding a listener

user.on("change:name", function (model, value) {
  console.log("name is now " + value);
});

user.set("name", "Grace"); // logs: name is now Grace

Nothing calls the logging function directly. It runs because set changed the name attribute, which fired change:name. A Backbone view uses exactly this mechanism to keep the interface in sync.

Adding validation

A model can reject invalid data by defining a validate method that returns an error when something is wrong.

Guarding the data

var User = Backbone.Model.extend({
  validate: function (attrs) {
    if (!attrs.name) {
      return "name cannot be empty";
    }
  }
});

var u = new User();
u.set("name", "", { validate: true }); // blocked
console.log(u.validationError); // "name cannot be empty"

With { validate: true }, an invalid set is refused and the attribute keeps its previous value, so the model never holds bad data.

Saving to a server

Models include synchronisation, so persisting a record is a single call once urlRoot is set.

Persisting with save

user.save(null, {
  success: function () { console.log("saved"); },
  error: function () { console.log("save failed"); }
});
// sends POST /api/users (or PUT if the model has an id) with JSON body

Backbone chooses POST for a new model and PUT for one that already has an id, mapping the model straight onto REST conventions. The same approach scales to groups of records, shown in the state management example.

Common pitfalls

A few recurring mistakes trip people up when they first work with models.

What usually goes wrong

The most frequent is mutating attributes directly, writing user.attributes.name = "X", which changes the value but fires no event, so nothing updates. Always use set. The second is forgetting { validate: true }, since validate runs on save automatically but not on a plain set unless you ask for it. The third is expecting save to work without a url or urlRoot, which leaves Backbone with nowhere to send the request. The concept behind all of this is covered in what is a model.

Read next: the Backbone view example, or back to the Examples hub.