原文: Build a Contacts Manager Using Backbone.js: Part 4

這一系列教程的第四部分,教我們如何完成對已經存在的Contacts進行編輯和保存.

本教程是基于這一系列的前三個教程. 有不清楚的請先閱讀前三部分.

開始

在Contact原模版里添加一個edit按鈕.

<button class="edit">Edit</button>

在原Contact顯示模版下添加新的編輯模版

<script id="contactEditTemplate" type="text/template"> <form action="#"><input type="file" value="<%= photo %>" /><input class="name" value="<%= name %>" /><input id="type" type="hidden" value="<%= type %>" /><input class="address" value="<%= address %>" /><input class="tel" value="<%= tel %>" /><input class="email" value="<%= email %>" /><button class="save">Save</button><button class="cancel">Cancel</button> </form> </script>

在ContactView的events中添加需要的新事件

"click button.edit": "editContact", //點擊class="edit"的button 執行 "change select.type": "addType",　　　　//class="type"的select值改變時執行 "click button.save": "saveEdits",　　　 //點擊class="save"的button 執行 "click button.cancel": "cancelEdit"　　 //點擊class="cancel"的button 執行

選擇一個Contact來編輯

在Contact model定義中添加新的屬性,指定編輯狀態Contact用到的模版.

editTemplate: _.template($("#contactEditTemplate").html()),

在ContactView中定義editContact方法的實現.

editContact: function () {this.$el.html(this.editTemplate(this.model.toJSON()));var newOpt = $("<option/>", {html: "<em>Add new...</em>",value: "addType" }),this.select = directory.createSelect().addClass("type") //調用directory的createSelect()方法創建現有的select控件. 值為當前form的隱藏的#type的input值..val(this.$el.find("#type").val()).append(newOpt) //在控件里添加新的addType選項..insertAfter(this.$el.find(".name"));　　　　　　　　　//把生成的DOM內容放到class="name"的控件后面.this.$el.find("input[type='hidden']").remove();　　　　　 //刪除原來隱藏的#type的input. },

增加新的type

在修改Contact時有可能會修改type為之前沒有使用過的值.所以我們需要為ContactView添加一個新的方法

addType: function () {if (this.select.val() === "addType") {　　　　　　　　//如果當前select的選項是addTypethis.select.remove();　　　　　　　　　　　　　　　　//刪除select控件$("<input />", {"class": "type"}).insertAfter(this.$el.find(".name")).focus(); //添加一個class="type"的input控件在class="name"控件后.}},

更新Contact

編輯完成之后我們還需要為編輯結果進行保存: 為ContactVew添加saveEdits方法.

saveEdits: function (e) {e.preventDefault();var formData = {},prev = this.model.previousAttributes();$(e.target).closest("form").find(":input").add(".photo").each(function () { //循環form下所有inputvar el = $(this);formData[el.attr("class")] = el.val();　　　　　　　　　　　　　　　　　　　　//類名為屬性給formdata賦值});if (formData.photo === "") {delete formData.photo;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 //如果photo為空刪掉使用默認值}this.model.set(formData);this.render();if (prev.photo === "/img/placeholder.png") {delete prev.photo;}_.each(contacts, function (contact) {　　　　　　　　　　　　　　　　　　　　　　　//循環每個Contactif (_.isEqual(contact, prev)) {　　　　　　　　　　　　　　　　　　　　　　　　//如果值和原來相等.　　　　　contacts.splice(_.indexOf(contacts, contact), 1, formData);　　　　　 //用新的值替換原來的值}}); },

假如我們選擇放棄自己的編輯,ContactView還需要一個取消編輯的方法

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

最后就是這個樣子了.

?

這一節的代碼下載:

http://cdn.tutsplus.com/net/uploads/legacy/1147_bb3and4/4/demo.zip

注: 原文內容里很多代碼有問題. 不過下載后的代碼都是可運行的. css文件我不太關注,基本就拷貝下載后源文件里的了.

?

轉載于:https://www.cnblogs.com/dangkei/p/5048714.html

總結

以上是生活随笔為你收集整理的用Backbone.js创建一个联系人管理系统(四)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。