用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

秒客网