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

时间:2023-03-09 13:14:31
用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的选项是addType this.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下所有input var 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) {                       //循环每个Contact
if (_.isEqual(contact, prev)) {                        //如果值和原来相等.     
contacts.splice(_.indexOf(contacts, contact), 1, formData);      //用新的值替换原来的值
}
});
},

假如我们选择放弃自己的编辑,ContactView还需要一个取消编辑的方法

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

最后就是这个样子了.

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

这一节的代码下载:

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

注: 原文内容里很多代码有问题. 不过下载后的代码都是可运行的. css文件我不太关注,基本就拷贝下载后源文件里的了.