Creating MVC RESTful API with Backbone.js - Part 2

At this part I will be writing Backbone stuffs to communicate with the server using the API that I created at my previous post.

For client side along with Backbone, I will be using JQuery and Underscore.js since Backbone has hard dependency on this and also Underscore provides a lot of the functional programming support.

First let's take a look on the folder structure that I would like to have:

Here I have separate folders inside Script folder for containing client-side model, collection and views.

Model

I have a script under model folder named Product.js that represents a backbone mode. Here is how it looks like:

Here I have created a backbone model named Product. Backbone keeps trace of the models by it's id attribute. At server-side product model class, we had an attribute named PropertyId. At the second line, I am setting to count PropertyId as the identifier of the model. This client-side model will fetch product data from server using the specified URL to return JSON data.

Now have a look inside the url function:

• If the model is new i.e. if the id of the model is not set, it will return URL /items
  That means when we will POST a product (no id available), it will invoke URL /items with POST verb and we will get the expected server-side behavior.
• If the model already exist, it will return /items/id, that will happen for GET, PUT and DELETE. Again these operations are supported by the server-side API with this URL.

Initialize is the method that is first invoked when the model is initiated. I am binding the url function with the model here so that the context of this works well.

Collection

Products is the collection of Product. The collection script looks like:

Here I am specifying the model for the collection and the URL to be invoked for retrieving the product list.

Views

I have created two backbone views. ProductListView to display list of all products and ProductView to display the details of a product.

ProductListView is rendered as a collection of it's child view ProductListItemView. Here is the script:

In general Backbone views are rendered by calling it's render function and logic for setting up HTML of the view are placed inside this render function.

In this case, the ProductListItemView is creating a div that contains the ProductName from the model. ProductListView is rendering a ProductListItemView for each model of its collection.

ProductView renders product details using a jquery-template.Here is the code:

The model.save() function creates a POST if the model is new, otherwise it creates a PUT request to the model URL.

So that's all about the backbone stuffs. Now, we need to put all these things together which I will cover in my next post.