My Backbone Card Identity 3

Learn to list data use backbonejs, add filter type, Add Delete Button

by erick

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.1/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js"></script>
        <div id="contacts">
            <header>
                <div id="filter"><label>Show me:</label></div>
                <a id="showForm" href="#">Add new contact</a>
                <form id="addContact" action="#">
                    <label for="photo">Photo:</label><input id="photo" type="file" />
                    <label for="name">Name:</label><input id="name" />
                    <label for="type">Type:</label><input id="type" />
                    <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>
            </header>
        </div>
        <script id="contactTemplate" type="text/template">
            <img src="<%= photo %>" alt="<%= name %>" />
            <h1><%= name %><span><%= type %></span></h1>
            <div><%= address %></div>
            <dl>
                <dt>Tel:</dt><dd><%= tel %></dd>
                <dt>Email:</dt><dd><a href="mailto:<%= email %>"><%= email %></a></dd>
            </dl>
            <button class="delete">Delete</button>
        </script>

CSS

#contacts { width:1300px; margin:auto; }
.contact-container { width:400px; padding:10px; border:1px solid #aaa; margin:0 10px 10px 0; position:relative; float:left; font-family:sans-serif; color:#333; background-color:#eee; }
.contact-container h1 { margin:0; font-weight:normal; }
.contact-container h1 span { float:right; font-size:14px; line-height:24px; font-weight:normal; }
.contact-container img { border-width:1px; border-style:solid; border-color:#fff; border-right-color:#aaa; border-bottom-color:#aaa; margin-right:10px; float:left; }
.contact-container div { margin-bottom:24px; font-size:14px; }
.contact-container a { color:#333;}
.contact-container dl { margin:0; float:left; font-size:14px; }
.contact-container dt, .contact-container dd { margin:0; float:left; }
.contact-container dt { width:50px; clear:left; }
.contact-container button { margin-top:10px; float:right; }

header { margin-bottom:10px; }
header:after { content:""; display:block; height:0; visibility:hidden; clear:both; font-size:0; line-height:0; }

#filter { float:left; }
#showForm { float:right; }
#addContact { display:none; width:466px; float:right; clear:both; font-family:sans-serif; font-size:14px; }
#addContact label { width:60px; margin-right:10px; text-align:right; line-height:25px; }
#addContact label, #addContact input { display:block; margin-bottom:10px; float:left; }
#address { width:380px; margin-left:2px; }
#addContact label[for="name"], #addContact label[for="address"], #addContact label[for="tel"] { clear:both; }
#addContact button { display:block; margin:10px 10px 0 0; float:right; clear:both; }

JavaScript

(function ($) {

    //demo data
var contacts = [
        { name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "family" },
        { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "family" },
        { name: "Contact 3", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "friend" },
        { name: "Contact 4", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "colleague" },
        { name: "Contact 5", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "family" },
        { name: "Contact 6", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "colleague" },
        { name: "Contact 7", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "friend" },
        { name: "Contact 8", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "family" }
    ];

    //define product model
window.Contact = Backbone.Model.extend({
        defaults: {
            photo: "http://img.faceyourmanga.com/mangatars/0/566/566210/normal_627702.png",
            name: "",
            address: "",
            tel: "",
            email: "",
            type: ""
        }
    });

    //define directory collection
window.Directory = Backbone.Collection.extend({
        model: Contact
    });

    //define individual contact view
window.ContactView = Backbone.View.extend({
        tagName: "article",
        className: "contact-container",
        template: _.template($("#contactTemplate").html()),

        render: function () {
            $(this.el).html(this.template(this.model.toJSON()));
            return this;
        },

        events: {
            "click...