BackBone Tutorial – Part 4: CRUD Operations on BackboneJs Models using HTTP REST Service

imagesIn this article we will discuss how we can perform CRUD operations on a backbone model using a REST based HTTP service.

Background

Earlier we have discussed about the benefits of using backbone.js and we also looked at the backbone models.

Link to complete series:

Link to complete series:

  1. BackBone Tutorial – Part 1: Introduction to Backbone.Js[^]
  2. BackBone Tutorial – Part 2: Understanding the basics of Backbone Models[^]
  3. BackBone Tutorial – Part 3: More about Backbone Models[^]
  4. BackBone Tutorial – Part 4: CRUD Operations on BackboneJs Models using HTTP REST Service[^]
  5. BackBone Tutorial – Part 5: Understanding Backbone.js Collections[^]
  6. BackBone Tutorial – Part 6: Understanding Backbone.js Views[^]
  7. BackBone Tutorial – Part 7: Understanding Backbone.js Routes and History[^]
  8. BackBone Tutorial – Part 8: Understanding Backbone.js Events[^]

In this article we will look at performing the CRUD operations on backbone models using a REST based web service.

Using the code

The first thing we will do is that we will create a simple REST based web api that can be used to save the data on the server using our simple backbone application. For this I have created a simple database with a single table as:

DB

The ID field is configured to auto increment and this is the primary key of the table. so while creating a new model we don’t have to provide this to the server. Now on top of this model, I have written a simple ASP.NET web api that will provide us the RESTful api. This API is configured to run on my local machine at: http://localhost:51377/. The API details are as follows:

  • Create: POST http://localhost:51377/api/values
  • Read: GET http://localhost:51377/api/values/{id}
  • Update: PUT http://localhost:51377/api/values/{id}
  • Delete: DELETE http://localhost:51377/api/values/{id}

Once we have the API running, we can start working on our backbone model. We had create the backbone model in our previous article as:

The backbone models inherently supports saving on the server using a restful web api. To save the model using a HTTP REST service, we need to specify the urlRoot in the backbone model. To actually save the model, we can call the save on the backbone model.The save method will trigger the validations and if the validations are successful, it will try to identify the action to be performed i.e. create or update and based on that action, it will use urlRoot and call the appropriate REST API to perform the operation. Let us specify the URL root to enable this model to use our web api service.

Now let us try to perform CRUD operations on this model.

Create

To create a new entity on the server, we need to populate the non identity fields in the model (other than ID in this case) and then call the Save method on the model.

Read

To read a single book entity, we need to create the book entity with the identity attribute populated, i.e., the ID of the book we want to read. Then we need to call the fetch method on the model object.

Update

Now let’s say we want to update the name of the book retrieved in the earlier fetch call. All we need to do is set the attributes we need to update and call the save method again.

Delete

Now to delete a Model, we just need to call the destroy method of the model object.

Custom URLs to perform CRUD operation on models

There are few scenarios where we might want to have provide custom URLs for the individual operations. This can be achieved by overriding the sync function and providing custom URL for each action. Let us create one more model BookEx to see how this can be done.

Now we can perform the CRUD operations on this model in the same way as we did for the previous model.

Point of interest

In this article we have looked at how to perform CRUD operations on backbone models using HTTP based REST service. This has been written from a beginner’s perspective. I hope this has been informative.

Download sample Web API code: WebAPISample
Download sample backbone app code: backboneSample

One thought on “BackBone Tutorial – Part 4: CRUD Operations on BackboneJs Models using HTTP REST Service