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 ...
Get Beautiful JavaScript now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.