Home » Backbone » Backbone Server Interaction

Backbone Server Interaction

Welcome to the sixth and the last module of this series. I do not have much to cover in this module. I will just mention some basic functionality for server interaction.

You can perform four types of server operation using backbone 

1. POST request

To explain the server interaction let’s create a model which will be used to POST data on server

var postDataOnServer = Backbone.Model.extend({
          url: '/your_url', // your service url
          defaults: {
             date: new Date().getTime() // default property
          },
          'userId',
          'userName'
          initialize: function () {
          }
      });

Next step is to create the instance of that model and set the parameters to post.

var userData = new postDataOnServer();

userData.save({ userId: users_id, userName: users_name }).complete(function () {
        // This will be called after completeing the server action, doesn't matter whether POST failed or passed.
});

userData.on('sync', function () {
        // will be called if POST operation is succesfull.
});

userData.on('error', function (error) {
       // will be called if POST operation fails
});

In above example we are not passing the id parameter with the request, so backbone will automatically create id for this model.

 

2. PUT request

To update model you should pass “id” property and values that you want to update.

var postDataOnServer = Backbone.Model.extend({
        id:5, // passing ID param with model will update the model, if the model with this ID doesn't exists then it will create that model on server.
        url: '/your_url',
        defaults: {
            date: new Date().getTime() // default property
        },
        'userId',
        'userName'
        initialize: function () {
        }
});

var userData = new postDataOnServer();
userData.save({ userId: updated_users_id, userName: updated_users_name }).complete(function () {
   // This will be called after completeing the server action, doesn't matter whether POST failed or passed.
});

 

3. DELETE REQUEST:

Destroy() method is used to delete the model from server.

var postDataOnServer = Backbone.Model.extend({
           id:5, // Model with this ID will be deleted
           url: '/your_url',
           defaults: {
             date: new Date().getTime() // default property
           },
           'userId',
           'userName'
           initialize: function () {
           }
     });

var userData = new postDataOnServer();
userData.destroy({
    success:function(model, response){
       // this method will be called if model gets destroyed successfully
    }
});

 

4. Get Request

Backbone fetch() method is used to get the data from server.

Model:

var userDataModel = Backbone.Model.extend({
    url: /your_url
    'userId',
    'userName'
    initialize: function () {
    }
});

Collection:

var userCollection = Backbone.Collection.extend({
    model: userDataModel,
    parse:function(response){
    return response;
  }
});

var mUserCollection = new userCollection();
mUserCollection.fetch({
    success:function(model,response){
       // do something
    }
});

Additionaly you can send params also to get the response, for example if you want to get the response for particular user then you can pass the user id as:

data: user_id

mUserCollection.fetch({data: {user_id: 2}})

So finally we have come to an end of this series, we have tried to cover almost all the major concepts that you need to create an application using Backbone.js library. Please comment and let us know if you have any suggestion or if you want us to include more topics.

Thanks!!! Happy CoDing…

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>