准备

开始本教程之前,你需要了解以下几点:

  • alexyoung / dailyjs-backbone-tutorial提交到了0953c5d版本
  • 第二部分中的API key
  • 第二部分中的“Client ID”
  • 更新app/js/config.js成你自己的key(如果你是检出的代码)

要检出源码,请运行以下命令(或用Git GUI工具):

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

删除任务列表

现在基本上需要实现一个完整的CRUD实例,删除的实现,我们只需要添加删除链接和在gapi.js文件中添加delete方法,可以自己尝试着实现下。

修改app/js/views/app.js,给 “删除任务”绑定事件:

events: {
  'click #add-list-button': 'addList'
, 'click #edit-list-button': 'editList'
, 'click #delete-list-button': 'deleteList'
},

新加一个上面我们绑定的方法deleteList

deleteList: function() {
  if (confirm('Are you sure you want to delete that list?')) {
    bTask.views.activeListMenuItem.model.destroy();
  }
  return false;
}

我们只改动了两处就实现了删除当前任务,当model.destroy执行时会调用deleteList方法,这样Backbone会自动的删除相应视图

修改Backbone.sync

为了实现删除数据,在app/js/gapi.jsupdate方法下面新加一个case的条件叫'delete'的:

case 'delete':
  requestContent['resource'] = model.toJSON();
  request = gapi.client.tasks[model.url].delete(requestContent);
  Backbone.gapiRequest(request, method, model, options);
break;

delete是由Google’s API提供的,和更新任务的实现类似

接下来

由于周末了,这部分很短,你自己可以去看下源码,熟悉下Google Tasks API和Backbone,其实我们还有很多功能需要实现

在上述的部分中你应该已经学会:

  • 写自定义的Backbone.sync方法
  • 使用javascript版的Google Task API
  • 写Backbone 模型(models), 视图(views), 和 集合(collections)

你如果理解了Backbone得模型和同步数据的原理,还有其他APIs和Google APIs的使用其实都很容易的适配

接下来的将涵盖以下几个部分:

  • 模拟Google Tasks API进行测试
  • 添加, 编辑, 和删除任务
  • 使用Bootstrap构建UI
  • 自定义Bootstrap

总结

教程中完整的代码可以在这里找到:alexyoung / dailyjs-backbone-tutorial, commit 8d88095