ASP.NET Web API & Backbone (2) —— CRUD

本章主要介紹使用Backbone 對 WebAPI 進行CRUD，我們將會操作一個資料集（比如：留言簿裡的留言一覽）。對於資料集合，Backbone 裡有專門的類型—— Backbone.Collection。對於集合的管理，Backbone.Collection 在建立後有 add, remove 事件，子項目的 update 需要自己在 model 上監聽 "change" 事件。根據初始化的 Backbone.Collection.url，Collection會自動為子項目分配 url/:id 這樣的URL，所以 Model 裡應該定義 id 屬性。另一方面，服務端的 WebAPI結構也需要符合規範。

整體如下：

這裡將一條Comment的View拆分出來，CommentListView 將 fetch 資料再挨個建立出 CommentView 。CommentListView 響應 UI 的刪除和添加操作。

CommentView 和 Comment Model:

var CommentModel = Backbone.Model.extend({idAttribute: "ID",urlRoot: 'api/comments'});var CommentView = Backbone.View.extend({el: '',template: _.template($('#commentTemplate').html()),initialize: function () {this.model.on('change', this.render, this);this.model.on('destroy', this.remove, this);},render: function() {var data = this.model.toJSON();this.$el.html(this.template(data));return this;},remove: function() {this.$el.remove();}});

注意：delete 按鈕按下處理時，需要知道處理的是哪一個 Model，因此在Template 產生時，將 CommentModel 的 ID 屬性儲存到 HTML 裡了。

<script id="commentTemplate" type="text/html"><li class="comment"><header>  <div class="info"><img src='<%= GravatarUrl %>' /><strong><span><%= Author %></span></strong>  </div>  <div class="actions"><a class="delete" href="#" id='<%= ID %>'>Delete Id: <span><%= ID %></span></a>  </div></header><div class="body">  <p><%= Text %></p></div></li></script>

對於一覽的控制：CommentList 則繼承於 Backbone.Collection，由 CommentListView 處理 delete 和 submit 按鈕事件：
CommentList.model.models 就是 CommentModel 的集合。

var CommentList = Backbone.Collection.extend({url: 'api/comments',                model: CommentModel});var CommentListView = Backbone.View.extend({el: 'body',initialize: function () {this.model.on('reset', this.render, this);},events : {'click .delete': 'delete','click .submit': 'create'},render: function () {var self = this;$('#comments').empty();_.each(this.model.models, function(mdl) {var commentView = new CommentView({model: mdl});$('#comments').append(commentView.render().$el);});},delete: function(obj) {alert('delete: ' +  $(obj.currentTarget).attr('id'));var id = parseInt($(obj.currentTarget).attr('id'), 10);var deletedModel = _.find(this.model.models, function(item) {return item.get('ID') === id;});var self = this;deletedModel.destroy({   success: function() {   self.model.remove(deletedModel);   },   error: self.errorHandle});},create: function() {var metaData = { ID: null, Text: $('#text').val(), Author: $('#author').val(), Email: $('#email').val(), GravatarUrl: '' };var comment = new CommentModel(metaData);var self = this;comment.save(metaData, {  success: function(res) {console.log(JSON.stringify(res));self.model.add(res);                        var view = new CommentView({model: res});$('#comments').append(view.render().$el);  },   error: self.errorHandle   });},errorHandle: function(model, xhr, options) {var err = $.parseJSON(xhr.responseText);alert(err.ExceptionMessage);}});

按照 Backbone 的定義，Model 會從 Collection.url 裡“繼承” URL，然後加上 id 屬性。但是如果新建立的 Model（add 操作），這個新Model對應URL就無法取得了。因此可以看到上面 CommentModel 的代碼中加了 urlRoot 屬性，保證建立的 Model 也能映射到正確的 URL 上。說到這裡，Backbone 和 Knockout  比較起來，需要寫更多的代碼，但也更加靈活。Backbone 裡的 Backbone.sync 封裝了 AJAX 的邏輯。而 Knockout 需要自己去調用ajax 了。