My Backbone Card Identity 4

Learn to list data use backbonejs, add filter type, Add Delete Button, Edit 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>
<script src="http://documentcloud.github.com/backbone/examples/backbone-localstorage.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="kode">Kode:</label><input id="kode" />
                    <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="<%= kode %>" />
            <h1><%= kode %><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>
                <br>
            <button class="delete">Delete</button>
            <button class="edit">Edit</button>
        </script>
        <script id="contactEditTemplate" type="text/template">
            <form action="#">
                <label for="photo">Photo:</label><input type="file" value="<%= photo %>" /><br>
                <input class="kode" value="<%= kode %>" />
                <input id="type" type="hidden" value="<%= type %>" />
                <input class="address" value="<%= address %>" />
               ...

CSS

#contacts { width:1300px; margin:auto; }
.contact-container { width:400px; padding:10px; border:5px 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:right; }
#address { width:380px; margin-left:2px; }
#addContact label[for="kode"], #addContact label[for="address"], #addContact label[for="tel"] { clear:both; }
#addContact button { display:block; margin:10px 10px 0 0; float:right; clear:both; }

.contact-container input, .contact-container select { display:block; margin:0; float:left; }
.contact-container .kode, .contact-container .address { clear:left; }
.contact-container input { margin:0 10px 3px 0; }
.contact-container .address { width:395px; margin-right:0; }
.contact-container .tel { width:90px; }
.contact-container form button { margin:5px 0 0; }

JavaScript

(function ($) {

    //demo data
window.contacts = [
        { photo: "http://img.faceyourmanga.com/mangatars/0/566/566210/normal_627702.png",kode: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "family" },
        { photo: "http://img.faceyourmanga.com/mangatars/0/566/566210/normal_627702.png",kode: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "family" },
        { photo: "http://img.faceyourmanga.com/mangatars/0/566/566210/normal_627702.png",kode: "Contact 3", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "friend" },
        { photo: "http://img.faceyourmanga.com/mangatars/0/566/566210/normal_627702.png",kode: "Contact 4", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "colleague" },
        { photo: "http://img.faceyourmanga.com/mangatars/0/566/566210/normal_627702.png",kode: "Contact 5", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "family" },
        { photo: "http://img.faceyourmanga.com/mangatars/0/566/566210/normal_627702.png",kode: "Contact 6", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "colleague" },
        { photo: "http://img.faceyourmanga.com/mangatars/0/566/566210/normal_627702.png",kode: "Contact 7", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "friend" },
        { photo: "http://img.faceyourmanga.com/mangatars/0/566/566210/normal_627702.png",kode: "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:...