Backbone.js Wine Cellar Tutorial — Part 2: CRUD

In Part 1 of this tutorial, we set up the basic infrastructure for the Wine Cellar application. The application so far is read-only: it allows you to retrieve a list of wines, and display the details of the wine you select.

In this second installment, we will add the ability to create, update, and delete (CRUD) wines.

RESTful Services

As mentioned in Part 1, Backbone.js provides a natural and elegant integration with RESTful services. If your back-end data is exposed through a pure RESTful API, retrieving (GET), creating (POST), updating (PUT), and deleting (DELETE) models is incredibly easy using the Backbone.js simple Model API.

This tutorial uses pure RESTful services. The services are implemented as follows:

HTTP Method URL Action
GET /api/wines Retrieve all wines
GET /api/wines/10 Retrieve wine with id == 10
POST /api/wines Add a new wine
PUT /api/wines/10 Update wine with id == 10
DELETE /api/wines/10 Delete wine with id == 10


A PHP version of these services (using the Slim framework) is available as part of the download. A similar Java version of the API (using JAX-RS) is available as part of this post.

Using Backbone.js with non-RESTful Services

If your persistence layer is not available through RESTful services, you can override Backbone.sync. From the documentation:

“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. You can override it in order to use a different persistence strategy, such as WebSockets, XML transport, or Local Storage.”

Using non-RESTful services is not discussed in this tutorial. See the documentation for more information.

Part 2: Adding Create, Update, Delete

You can run the application (Part 2) here. The create/update/delete features are disabled in this online version. Use the link at the bottom of this post to download a fully enabled version.

Here is the code for the improved version of the applications. Key changes are discussed below.

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

window.WineCollection = Backbone.Collection.extend({
    model:Wine,
    url:"../api/wines"
});


// Views
window.WineListView = Backbone.View.extend({

    tagName:'ul',

    initialize:function () {
        this.model.bind("reset", this.render, this);
        var self = this;
        this.model.bind("add", function (wine) {
            $(self.el).append(new WineListItemView({model:wine}).render().el);
        });
    },

    render:function (eventName) {
        _.each(this.model.models, function (wine) {
            $(this.el).append(new WineListItemView({model:wine}).render().el);
        }, this);
        return this;
    }
});

window.WineListItemView = Backbone.View.extend({

    tagName:"li",

    template:_.template($('#tpl-wine-list-item').html()),

    initialize:function () {
        this.model.bind("change", this.render, this);
        this.model.bind("destroy", this.close, this);
    },

    render:function (eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    },

    close:function () {
        $(this.el).unbind();
        $(this.el).remove();
    }
});

window.WineView = Backbone.View.extend({

    template:_.template($('#tpl-wine-details').html()),

    initialize:function () {
        this.model.bind("change", this.render, this);
    },

    render:function (eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    },

    events:{
        "change input":"change",
        "click .save":"saveWine",
        "click .delete":"deleteWine"
    },

    change:function (event) {
        var target = event.target;
        console.log('changing ' + target.id + ' from: ' + target.defaultValue + ' to: ' + target.value);
        // You could change your model on the spot, like this:
        // var change = {};
        // change[target.name] = target.value;
        // this.model.set(change);
    },

    saveWine:function () {
        this.model.set({
            name:$('#name').val(),
            grapes:$('#grapes').val(),
            country:$('#country').val(),
            region:$('#region').val(),
            year:$('#year').val(),
            description:$('#description').val()
        });
        if (this.model.isNew()) {
            app.wineList.create(this.model);
        } else {
            this.model.save();
        }
        return false;
    },

    deleteWine:function () {
        this.model.destroy({
            success:function () {
                alert('Wine deleted successfully');
                window.history.back();
            }
        });
        return false;
    },

    close:function () {
        $(this.el).unbind();
        $(this.el).empty();
    }
});

window.HeaderView = Backbone.View.extend({

    template:_.template($('#tpl-header').html()),

    initialize:function () {
        this.render();
    },

    render:function (eventName) {
        $(this.el).html(this.template());
        return this;
    },

    events:{
        "click .new":"newWine"
    },

    newWine:function (event) {
        if (app.wineView) app.wineView.close();
        app.wineView = new WineView({model:new Wine()});
        $('#content').html(app.wineView.render().el);
        return false;
    }
});


// Router
var AppRouter = Backbone.Router.extend({

    routes:{
        "":"list",
        "wines/:id":"wineDetails"
    },

    initialize:function () {
        $('#header').html(new HeaderView().render().el);
    },

    list:function () {
        this.wineList = new WineCollection();
        this.wineListView = new WineListView({model:this.wineList});
        this.wineList.fetch();
        $('#sidebar').html(this.wineListView.render().el);
    },

    wineDetails:function (id) {
        this.wine = this.wineList.get(id);
        if (app.wineView) app.wineView.close();
        this.wineView = new WineView({model:this.wine});
        $('#content').html(this.wineView.render().el);
    }

});

var app = new AppRouter();
Backbone.history.start();

Wine

Two attributes were added to the Wine Model:

  • urlRoot: RESTful service endpoint to retrieve or persist Model data. Note that this attribute is only needed when retrieving/persisting Models that are not part of a Collection. If the Model is part of a Collection, the url attribute defined in the Collection is enough for Backbone.js to know how to retrieve, update, or delete data using your RESTful API.
  • defaults: Default values used when a new instance of the model is created. This attribute is optional. However, it was required in this application for the wine-details template to render an ‘empty’ wine model object (which happens when adding a new wine).

WineListView

When a new wine is added, you want it to automatically appear in the list. To make that happen, you bind the View to the add event of the WineListView model (which is the collection of wines). When that event is fired, a new instance of WineListItemView is created and added to the list.

WineListItemView

When a wine is changed, you want the corresponding WineListItemView to re-render automatically to reflect the change. To make that happen, you bind the View to the change event of its model, and execute the render function when the event is fired.

Similarly, when a wine is deleted, you want the list item to be removed automatically. To make that happen, you bind the view to the destroy event of its model and execute our custom close function when the event is fired. To avoid memory leaks and events firing multiple times, it is important to unbind the event listeners before removing the list item from the DOM.

Note that in either case we don’t have the overhead of re-rendering the entire list: we only re-render or remove the list item affected by the change.

WineView

In the spirit of encapsulation, the event handlers for the Save and Delete buttons are defined inside WineView, as opposed to defining them as free-hanging code blocks outside the “class” definitions. You use the Backbone.js Events syntax which uses jQuery delegate mechanism behind the scenes.

There are always different approaches to update the model based on user input in a form:

  • “Real time” approach: you use the change handler to update the model as changes are made in the form. This is in essence bi-directional data binding: the model and the UI controls are always in sync. Using this approach, you can then choose between sending changes to the server in real time (implicit save), or wait until the user clicks a Save button (explicit save). The first option can be chatty and unpractical when there are cross-field validation rules. The second option may require you to undo model changes if the user navigates to another item without clicking Save.
  • “Delayed” approach: You wait until the user clicks Save to update the model based on the new values in UI controls, and then send the changes to the server.

This discussion is not specific to Backbone.js and is therefore beyond the scope of this post. For simplicity, I used the delayed approach here. However I still wired the change event, and use it to log changes to the console. I found this very useful when debugging the application, and particularly to make sure I had cleaned up my bindings (see close function): I you see the change event firing multiple times, you probably didn’t clean up as appropriate.

HeaderView

Backbone.js Views are typically used to render domain models (as done in WineListView, WineListItemView, and Wine View). But they can also be used to create composite UI components. For example, in this application, we define a Header View (a toolbar) that could be made of different components and that encapsulates its own logic.

Download

The source code for this application is hosted on GitHub here (see part2). And here is a quick link to the download.

You will need the RESTful services to run this application. A PHP version (using the Slim framework) is available as part of the download.

UPDATE (1/11/2012): A version of this application with a Java back-end (using JAX-RS and Jersey) is also available on GitHub here. You can find more information on the Java version of this application here.

What’s Next?

The application so far doesn’t support deep-linking. For example, select a wine in the list, grab the URL in the address bar and paste it in another browser window: it doesn’t work. In Part 3, we will add complete support for deep linking.

28 Responses to Backbone.js Wine Cellar Tutorial — Part 2: CRUD

  1. Playeren February 17, 2012 at 4:11 pm #

    Hi,

    Thanks for the great turorial! A quick n00b question:
    I can’t figure out where you’re setting the id for the new wine you’re creating – what am I missing?

    • Playeren February 17, 2012 at 4:53 pm #

      Never mind :) I looked at the API and sql and figured it out.

  2. Lucas April 2, 2012 at 8:48 pm #

    Hello,
    I’ve found small error in your application. If you open this page – http://coenraets.org/backbone-cellar/part2/#wines/2 you will get this error:

    TypeError: ‘undefined’ is not an object (evaluating ‘this.wineList.get’)

    I think you should initialize wineList variable in the initialize phase of AppRouter instead of the ‘list’ method. Above link take you directly to wineDetails action so there is no change to create wineList object.

    PS. Thank you for your tutorial, it helps me to better understand backbone.

    • Lucas April 2, 2012 at 8:51 pm #

      I’m sorry I haven’t noticed you fixed this issue in Part 3 of your tutorial. You can ignore my previous comment :).

  3. Ricardo April 8, 2012 at 9:55 pm #

    Great tutorial, I’m loving this so far. Hadn’t yet found a good resource that both uses Backbone and a simple RESTful API, and this just about covers my basic needs. Would love a fourth part where you’d explore more on the underscore.js methods ;)

    My only doubt goes beyond the scope of all this, however. Why write this application entirely on a global scope? Encapsulating the code on an anonymous function would be a better practice, any reason why not in this particular case?

    Thanks for taking the time to do this, hugely appreciated.

    • Levi May 23, 2012 at 9:26 pm #

      Im assuming he did it this way to save time and maintain focus on backbone.js, not delving on JS best practices.

  4. DK April 17, 2012 at 2:37 pm #

    had to tweak this line in Models.js to the below on OS X with built in PHP and Apache combo
    url:”../api/index.php/wines”
    must be missing a setting somewhere, but this was a faster route to get’r going

    DK

  5. Totti Anh Nguyen May 25, 2012 at 2:11 am #

    Thanks for a very helpful tutorial :). Btw, minor fix, this line
    this.wineListView = new WineListView({model:this.wineList});

    should have been :
    this.wineListView = new WineListView({collection:this.wineList}); // more proper use of @property collection.

  6. Dirk-Jan de Groot July 16, 2012 at 4:09 pm #

    This tutorial is very good work. Thanks!

    FYI: there is a line in your /tutorial/api/index.php that was causing a conflict on my XAMPP installation and at least one other user experienced the same problem as you can read here:
    http://stackoverflow.com/questions/11223516/showing-500-internal-server-error-using-backbone-js-with-slim-php-when-only-ad/11508027#11508027

    It looks like a bug to me that this is the first line of the function addWine:
    error_log(‘addWine\n’, 3, ‘/var/tmp/php.log’);

    That line was causing the issue since there (as far as i know) is no /var/tmp directory on my windows pc.

    The issue resulted in receiving 500 application errors for all POST requests.

  7. jbcavarec July 18, 2012 at 10:29 am #

    Hello, thank you for your amazing tutorial
    I am testing part by part “Wine cellar” , i encounter some little problem i have in my own application .
    if i click on one item i.e /#wines/11 , ok my right list print details … if i reload page (with url /#wines/11 the left list disappear and i have message “this.winelist undefined” in firebug . How can i change url ?
    THX

  8. jbcavarec July 18, 2012 at 10:57 am #

    Please , i have another question,
    How can you be sure wineList is fetched before make a render , this 2 instructions are asynchronous , i en countered this pb too in my app .

    this.wineList.fetch() ;
    $(‘#sidebar’).html(this.wineListView.render().el) ;

    THX__

  9. Chet July 20, 2012 at 12:48 am #

    This has easily been one of the best backbone tutorials for learning the framework. Integrated the ideas and principles shown here to very easily to replace an old ASP.NET application with some HTML5, JavaScript, JQuery Mobile goodness.

  10. Chris Lee January 4, 2013 at 9:45 am #

    why set urlRoot as “../api/wines”?

    • Chris Lee January 4, 2013 at 9:59 am #

      ooh, you wrote this article earlier than the nodejs express mongodb one, so the back-end part is quite differrent!

  11. Maddy January 14, 2013 at 2:50 pm #

    Hi
    I having one problem with backbone-jax-cellar applicatoin.
    I followed all the step which are given in read me file.
    i am using eclipse for run this application while running this application with Run configuration its giving error like main not found….so what is the solution?how to run this application?

  12. dongming April 23, 2013 at 11:39 am #

    when I refreshed the url which like ‘/part2/#wines/20′ directly,I got an error in the console of chrome

  13. Spectacular conquer! I have to beginner at the same time while you fix your internet site, how may possibly i sign up for a site web page? Your account made it easier for me a acceptable offer. I have been somewhat acquainted of your ones transmit provided lively see-through thought

Trackbacks/Pingbacks

  1. Confluence: Mobile Devices Development - December 26, 2011

    LARGE SCALE APPLICATION DEVELOPMENT…

    LARGE SCALE APPLICATION DEVELOPMENT Backbone.js:…

  2. Backbone.js Wine Cellar Tutorial — Part 1: Getting Started - January 5, 2012

    [...] Part 2 is available here. [...]

  3. Backbone.js Wine Cellar Tutorial — Part 3: Deep Linking and Application States - January 11, 2012

    [...] Part 1 of this tutorial, we set up the basic infrastructure for the Wine Cellar application. In Part 2, we added the ability to create, update, and delete (CRUD) [...]

  4. Backbone.js es sexo | Asier Marqués - January 26, 2012

    [...] a través de un objeto json, que normalmente incluirá el Modelo. El modelo se puede integrar muy fácilmente con nuestra API de servicios en el backend, permitiéndonos hacer un CRUD desde el cliente de forma [...]

  5. Backbone.js Lessons Learned and Improved Sample App - January 31, 2012

    [...] few weeks ago, I posted a three-part Backbone.js tutorial (part 1, part 2, part 3). Since then, I spent more time building a real-life application with Backbone. I ran into [...]

  6. Sample Application with Angular.JS - February 2, 2012

    [...] I blogged a three-part Backbone.js tutorial (part 1, part 2, part 3), a number of people asked me to try Angular.js. So I decided to take it for a test drive. [...]

  7. Sample Mobile App with Backbone.js and PhoneGap - February 7, 2012

    [...] recently blogged a tutorial (part 1, part 2, part 3, and postface) that takes you through the process of building a CRUD application using HTML [...]

  8. Learn Backbone.js Completely | JavaScript is Sexy - January 14, 2013

    [...] these two tutorials: — 
Backbone.js Wine Cellar Tutorial — Part 2: CRUD 

— 
Backbone.js Lessons Learned and Improved Sample App
 (This is a MUST [...]

  9. Lexicons and RESTful APIs | Doing Web Linguistics - January 25, 2013

    [...] to have URLs that look more or less like this (based on a table from a nice tutorial called “Backbone.js Wine Cellar Tutorial — Part 2: CRUD by Christophe [...]

  10. Developing Java web applications with Backbone.js - April 26, 2013

    [...] have learned the where-about from Backbone.js Wine Cellar Tutorial — Part 2: CRUD by Christophe Coenraets and used his sample POC to develop a J2ee web application with [...]

  11. Sample App with Backbone.js and Twitter Bootstrap | HTML CSS3 - June 28, 2013

    [...] you are new to Backbone.js, you may want to start with the tutorial (part 1, part 2, part 3, and postface) I blogged recently. “Backbone Directory” includes some interesting [...]

Leave a Reply