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

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

欢迎回到这系列的教程,关注使用Backbone.js构建应用程序. 如果你还没看过第一,二部分推荐你先看第一二部分~~~~

剩下内容我简单翻译重要部分, 相同类似太多废话了就不说了.

添加model到collection

要添加单独的一个model到collection中. 首先我们要提供一个填写model信息的表.请把下面的html添加到ID为contacts的div中.

<form id="addContact" action="#">
    <label for="photo">photo:</label><input id="photo" type="file" />
    <label for="type">Type:</label><input id="type" />
    <label for="name">Name:</label><input id="name" />
    <label for="address">Address:</label><input id="address" />
    <label for="tel">Tel:</label><input id="tel" />
    <label for="email">Email:</label><input id="email" />
    <button id="add">Add</button>
</form>

在ContactView的events里添加点击addbutton的事件

events:{
   "click #add": "addContact"
},

在events的后面插入addContact的实现方法

addContact: function (e) {
            e.preventDefault();  //不要刷新页面

            var newModel = {};
            $("#addContact").children("input").each(function (i, el) {  //循环表单下每个input生成新的model对象
                if ($(el).val() !== "") {
                    newModel[el.id] = $(el).val();
                }
            });

            contacts.push(newModel);

            if (_.indexOf(this.getTypes(), formData.type) === -1) {  　　　　//如果新的type不在select选择范围内. 把新的type加到select的option
                this.collection.add(new Contact(newModel));
                this.$el.find("#filter").find("select").remove().end().append(this.createSelect());
            } else {
                this.collection.add(new Contact(newModel));
            }
        },

渲染新的model

在initialize()方法中加载新的事件监听.

this.collection.on("add", this.renderContact, this);

给原有的的contact定义 添加新的默认属性

name: "",
address: "",
tel: "",
email: "",
type: ""

从Collection中删除model

首先要在Contact模版文件内添加一个delete button

<button class="delete">Delete</button>

定义事件,还有实现方法

        events: {
            "change #filter select": "setFilter",
            "click #add": "addContact",
            "click button.delete": "deleteContact"
        },
        deleteContact: function () {
            var removedType = this.model.get("type").toLowerCase();

            this.model.destroy();

            this.remove();

            if (_.indexOf(directory.getTypes(), removedType) === -1) {
                directory.$el.find("#filter select").children("[value='" + removedType + "']").remove();
            }
        },

删除model数据

在事件监听部分加入

this.collection.on("remove", this.removeContact, this);

实现removeContact方法,添加在addContact方法的后面

removeContact: function (removedModel) {
    var removed = removedModel.attributes;

    if (removed.photo === "/img/placeholder.png") {
        delete removed.photo;
    }

    _.each(contacts, function (contact) {
        if (_.isEqual(contact, removed)) {
            contacts.splice(_.indexOf(contacts, contact), 1);
        }
    });
},

对于表单的处理

在header标签后添加一个打开表单的连接

<a id="showForm" href="#">Add new contact</a>

在events中添加新的事件定义

"click #showForm": "showForm"

随后实现showForm方法

showForm: function () {
    this.$el.find("#addContact").slideToggle();
}

下一部分教程介绍如何编辑已经存在的Contact

本教程代码:

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