Backbone.JS Model

Recap

The first article about Backbone.js explained Single Page Applications, the available frameworks, libraries and somewhat Backbone. In this article we will explain the Backbone Model.

Backbone Model

Model is the smallest and is a very important part of any application. A Backbone model contains interactive data for an application. In other words, a Backbone model encapsulates model data that is further available for an application to interact with the user interface or an application server. I think this is a very important advantage of a Backbone powered application over a jQuery based application. The Backbone Model also provides some basic and essential functionalities like attributes, events and validations for models.

We will explain a very basic online shopping site application as an example while working on sample code using Backbone.js. A Product catalogue is a central entity of an online shopping site. Let us create a very simple and basic Product Model using the Backbone Model.

Let us add a JavaScript file to our project as in the following.





Let us add a reference to the main.js file to the HTML file as in following.



We can inherit the Backbone.Model using Backbone.Model.extend({}) to create our domain-specific model. In simple words we can have Backbone.Model functionality intact while designiing a domain-specific Model.



Let us create an instance of a Product model as in following.



We have successfully created our first product catalogue model using Backbone Model. Backbone Models provide many predefined functionalities for managing changes to the model. We will explain some of the very basic but very important attributes of Backbone Model.



changed

changed is a very interesting attribute that internally keeps eye on all changes in the model.

cid

cid is a very special type of attribute assigned automatically by Backbone while creating an instance of an object. The cid attribute identifies an object that is still not updated in the database and available for the user interface.

id

id is a very important attribute of Backbone.Model. The id attribute is normally a permanent or unique identification of the model. id is assigned from the server, generally it is a unique / primary key field from the database table. id plays a very significant role in the integration of Backbone with the RESTful API. I know it is a bit confusing, we will explain it in details while working with CRUD operations with a database using Backbone.

set

set is used to set a value to the model attribute. We can also assign multiple values using set.



Let us check our domain specific attributes.



get

get provides a value assign to model attributes.





defaults

Using defaults we can set default values while creating an object. We can of course overwrite default values using set.

Let us assign a few default attributes to the Product catalogue.





:)

Our first model is ready. We will explain model validations using Backbone.js in a future article.