Subscribe via RSS Feed

Backbone.js in Client Side Javascript MVC – with Java based Web Project

April 27, 2013 2 Comments


This article is extension of Backbone.js based Application with Java based web project.

The project code can be downloaded here.

In Backbone.js Javascript MVC Frameworks, The Model is referred to the intermediate data holding objects in client side which is required for data manipulation, validation on client side, fetching data from server side and finally required for submission to server side.

In our case, the Model Code is -


window.Wine = Backbone.Model.extend({
urlRoot:"http://localhost:8080/brandserver/rest/wines",
     defaults:{
     "id":null,
     "name":"",
     "grapes":"",
     "country":"USA",
     "region":"California",
     "year":"",
     "description":"",
     "picture":""
    }
});

Here, the defaults attributes are for the data at the time of new Model data instansiation.

Also we can see the model data instantiation in newwine function of AppRouter -

 
app.wineView = new WineView({model:new Wine( {id:null,name:"",grapes:"",country:"",region:"",year:"",description:"", picture:"generic.jpg" })}); // instantiation of model

Here we have passed some values to the Attributes of the Wine Model.

In a Model, the urlRoot specifies the main url path for the REST based web service.

In our case, it is -

urlRoot:”http://localhost:8080/brandserver/rest/wines”

Now in -

 
window.WineCollection = Backbone.Collection.extend({
    model:Wine,
    url:"http://localhost:8080/brandserver/rest/wines"
});

The collection, named as WineCollection is initialised with Model Wine by expecting same json data from server by calling the REST based web service.

Interesting to see, the AppRouter calls the list function, which actually takes A REST based web service call internally, when the following code is executed -

 
this.wineList = new WineCollection();
this.wineListView = new WineListView({model:this.wineList});
this.wineList.fetch(); // Call to Server for all data selecting (REST Web Service)

Now interesting is Model Saving function – saveWine -

 

    var win = new Wine(this.model);

    win.set({
        name:$('#name').val(),
        grapes:$('#grapes').val(),
        country:$('#country').val(),
        region:$('#region').val(),
        year:$('#year').val(),
        description:$('#description').val()
   });
   // Some code snippet
   app.wineList.create(win, {  //REST Web Service calling internally
       success:function () {
            	alert('Wine saved successfully');
               	app.navigate('', true);// to initialize the state
                window.history.back(); 
             }
      });
   // The above Code snippet is used for saving a new model to the server. The create function is important. This     
   // callback function is called after instantiating a new model and set values to it's attributes. 

   win.save(); //REST Web Service calling internally
   alert('Wine updated successfully');
   app.navigate('', true); // to initialize the state
   window.history.back();
   // The above Code snippet is used for updating a model to the server. The save function is important. This     
   // callback function is called after setting values to an existing model attributes. 

Now the deleteWine Function -

 
    var win = new Wine(this.model); // Instantiate variable with current model.
    win.destroy({ // REST Web Service Calling
         success:function () {  
                alert('Wine deleted successfully');
                app.navigate('', true);
                //window.history.back();
            }
        });

   // The above Code snippet is used for deleting a model to the server. The destory function is important. This     
   // callback function is called to delete corresponding row in database of the current model. 

Other Resources you may have interest :

1> Developing Java web applications with Backbone.js

2> Backbone.js Router in Client Side Javascript MVC – with Java based Web Project – Part 2

3> Backbone.js View in Client Side Javascript MVC – with Java based Web Project – Part 3

Enter your email address:

Delivered by FeedBurner

Sign Up to read the rest of the content

Email will be used only for updates of our site

No Thanks