Part 8: 刪除任務列表

z.w發表於2015-01-19

準備

開始本教程之前，你需要了解以下幾點：

  • 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.js的update方法下面新加一個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

相關文章