Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. JAX-RS provides a standardized API for building RESTful web services in Java. This example will show how to build a simple pet catalog application using backbone.js and JAX-RS.

http://java.dzone.com/sites/all/files/image002_5.jpg
http://java.dzone.com/sites/all/files/image004_0.jpg
The Backbone.js Client architecture
http://java.dzone.com/sites/all/files/image005_2.png
http://java.dzone.com/sites/all/files/image006_0.png
 

Models contain the  data and  defines the methods related to the data. You extend Backbone.Model with your domain-specific methods, and Model provides a basic set of functionality for managing changes.

Here is  the source code for Item.js:

    
var ItemModel = Backbone.Model.extend({
  urlRoot: "resources/items",

  defaults: {
  id: null,
  name: "",
description:"",
  }

});

Collections are ordered sets of models which synchronize with the server. Collections can trigger  events to be notified when any model in the collection has been changed, add, remove , to fetch  from the server.

http://java.dzone.com/sites/all/files/image007_0.png

Here is  the source code for  Items Collection Items.js:

    
var ItemList = Backbone.Collection.extend({
  model: ItemModel,
  url: "resources/items",
}
});

var Items = new ItemList();

The model property specifies the model class that the collection contains.

The url property (or function) on a collection references its location on the server.

Backbone.sync is the function that Backbone calls every time it attempts to read or save a model to the server. By default, it uses (jQuery/Zepto).ajax to make a RESTful JSON request.  The default sync handler maps Fetch,Save,Destroy CRUD requests  to REST using the collection url :

  • Save (new) ? create ? HTTP POST  /url
  • Fetch ? read ? GET  /url/id
  • Save ? update ? PUT  /url/id
  • Destroy ? delete ? DELETE  /url/id

The View

  • a view is bound to a model/collection
  • manipulates the model data in the DOM
  • delegates DOM events
  • Render function uses the model data to render the template

With the backbone view you can bind your view's render function to the model's "change" event , then everywhere that model data is displayed in the UI, it will be updated.

Here is  the source code for the  Item View ItemView.js:

window.ItemView = Backbone.View.extend({
    initialize: function () {
        this.render();
    },
    render: function () {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    },
    events: {
        "change"        : "change",
        "click .save"   : "beforeSave",
        "click .delete" : "deleteItem"
    },
});

In the view you  override the render function, specify events, and in this example specify a template. In the code above , the initialize function  binds  the  View to the change events of its model, which call the render function when the event is fired. The render function  renders the view template from model data, and updates this.el with the new HTML.

this View  renders the  model data into HTML using a template engine.

    
  <script type="text/template" id="item-template">
  <h3>Name: {{name}}</h3>
  <p>{{description}}</p>
  </script>
  • model attributes: {"name":"Sneaky Cat","Description":"my cat  is so sneaky"}
  • render method: this.$el.html(this.template(this.model.toJSON()));
  • template output:   <h3>Name: Sneaky Cat</h3> <p>my cat is so sneaky</p>

The Catalog Items database table

The Catalog items are contained in a  database table:

  • Item. Contains the title and text for each item in the catalog.
CREATE TABLE item (
 id INT NOT NULL,
 productid VARCHAR(10) ,
 name VARCHAR(30) ,
 description VARCHAR(500) ,
 imageurl VARCHAR(155),
 imagethumburl VARCHAR(155),
 price DECIMAL(14,2) ,
 primary key (id)
);

The Model