用Backbone.js创建一个联系人管理系统(四)

原文: 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文件我不太关注,基本就拷贝下载后源文件里的了.