Backbone.js Tutorial: Updates for 1.0, Clear Complete

• Part 1: Build Environment


• Part 2: Google's APIs and RequireJS


• Part 3: Authenticating with OAuth2


• Part 4: Backbone.sync


• Part 5: List Views


• Part 6: Creating Lists


• Part 7: Editing Lists


• Part 8: Deleting Lists


• Part 9: Tasks


• Part 10: Oh No Not More Tasks


• Part 11: Spies, Stubs, and Mocks


• Part 12: Testing with Mocks


• Part 13: Routes


• Part 14: Customising the UI


• Part 15: Updates for 1.0, Clear Complete

Preparation

Before starting this tutorial, you?ll need the following:

• alexyoung / dailyjs-backbone-tutorial at commit 711c9f6



• The API key from part 2



• The ?Client ID? key from part 2



• Update app/js/config.js with your keys (if you?ve checked out my source)

To check out the source, run the following commands (or use a suitable Git GUI tool):

git clone git@github.com:alexyoung/dailyjs-backbone-tutorial.git
cd dailyjs-backbone-tutorial
git reset --hard 711c9f6

Updating to Backbone 1.0

I updated bTask to work with Backbone 1.0, which required two small changes. The first was a change to the behaviour of callbacks in Backbone.sync ? the internal call to the success callback now only needs one argument, which is the response data. I think I?ve mentioned that on DailyJS before, but you shouldn?t need to worry about this in your own Backbone projects unless you?ve written a custom Backbone.sync implementation.

The second change was the collection add events were firing when the views called fetch. I fixed this by passing reset: true to the fetch options. Details on this have been included in Backbone?s documentation under ?Upgrading to 1.0?:

If you want to smartly update the contents of a Collection, adding new models, removing missing ones, and merging those already present, you now call set (previously named ?update?), a similar operation to calling set on a Model. This is now the default when you call fetch on a collection. To get the old behavior, pass {reset: true}.

Adding ?Clear Complete?

When a task in Google Tasks is marked as done, it will appear with strike-through and hang around in the list until it is cleared or deleted. Most Google Tasks clients will have a button that says ?Clear Complete?, so I added one to bTask.

I added a method called clear to the Tasks collection which calls the .clear method from the Google Tasks API (rather than going through Backbone.sync):

define(['models/task'], function(Task) {
  var Tasks = Backbone.Collection.extend({
    model: Task,
    url: 'tasks',

    clear: function(tasklist, options) {
      var success = options.success || function() {}
        , request
        , self = this
        ;

      options.success = function() {
        self.remove(self.filter(function(task) {
          return task.get('status') === 'completed';
        }));

        success();
      };

      request = gapi.client.tasks.tasks.clear({ tasklist: tasklist });
      Backbone.gapiRequest(request, 'update', this, options);
    }
  });

  return Tasks;
});

I also added a button (using Bootstrap?s built-in icons) to app/js/templates/app.html, and added an event to AppView (in app/js/views/app.js):

var AppView = Backbone.View.extend({
  // ...
  events: {
    'click .clear-complete': 'clearComplete'
  },

  // ...
  clearComplete: function() {
    var list = bTask.views.activeListMenuItem.model;
    bTask.collections.tasks.clear(list.get('id'), { success: function() {
      // Show some kind of user feedback
    }});
    return false;
  }
});

I had to change app/js/views/lists/menuitem.js to set the current collection in the open method to make this work.

Summary

Because I?ve been reviewing Backbone?s evolution as it progressed to 1.0 for DailyJS, updating this project wasn?t too much effort. In general the 1.0 release is backwards compatible, so you should definitely consider upgrading your own projects. Also, now bTask has ?Clear Complete? I feel like it does enough of the standard Google Tasks features for me to actually use it regularly.

Remember that you can try it out for yourself at todo.dailyjs.com.

The full source for this tutorial can be found in alexyoung / dailyjs-backbone-tutorial, commit 705bcb4.

crawled from : Dailyjs