用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();
},

最后就是这个样子了.

这一节的代码下载:

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

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