O'Reilly logo

Beautiful JavaScript by Anton Kovalyov

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

CHAPTER FIVE

Hacking JavaScript Constructors for Model Harmony

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required