Beautiful JavaScript

CHAPTER FIVE

Hacking JavaScript Constructors for Model Harmony

Ben Vinegar

JavaScript MVC—or MVW (Model, View, “Whatever”)—frameworks come in many flavors, shapes, and sizes. But by virtue of their namesake, they all provide developers with a fundamental component: models, which “model” the data associated with the application. In client-side web apps, they typically represent a database-backed object.

Last year at Disqus, we rewrote our embedded client-side application in Backbone, a minimal MVC framework. Backbone is often criticized for having an unsophisticated “view” layer, but one thing it does particularly well is managing models.

Defining a new model in Backbone looks like this:

var User = Backbone.Model.extend({
  defaults: {
    username: '',
    firstName: '',
    lastName: ''
  },

  idAttribute: 'username',

  fullName: function () {
    return this.get('firstName') + this.get('lastName');
  }
});

Here’s some sample code that initializes a new model, and demonstrates how that model instance might be used in an application:

var user = new User({
  username: 'john_doe',
  firstName: 'John',
  lastName: 'Doe'
});

user.fullName(); // John Doe

user.set('firstName', 'Bill');

user.save(); // PUTs changes to server endpoint

These are simple examples, but client-side models can be very powerful, and they are typically—ahem—the backbone of any nontrivial MVC app.

Additionally, Backbone provides what are called “collection” classes, which help developers easily manipulate common sets of model instances. You can ...