My Backbone Card Identity

Learn to list data use backbonejs

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="//cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
        <div id="contacts"></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>
        </script>

CSS

.contact-container { width:400px; padding:10px; border:1px solid #aaa; margin:0 10px 10px 0; 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; }

JavaScript

(function ($) {
//demo data
    var contacts = [
        { photo: "http://img.faceyourmanga.com/mangatars/0/470/470165/normal_627774.png", name: "Eri Nur Sofa", address: "Jalan Gasem Raya RT02/RW04, Tlogosari Wetan, Kec.Pedurungan,Semarang 50196", tel: "085641280960", email: "[email protected]", type: "Owner" },
        { photo: "http://img.faceyourmanga.com/mangatars/0/564/564679/normal_628307.png", name: "Kholilurrohman", 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/566336/normal_627802.png", name: "Haidar", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "friend" },
        { photo: "http://img.faceyourmanga.com/mangatars/0/538/538701/normal_627794.png", name: "Ahmad Falasifadin", 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/566367/normal_627811.png", name: "M Ridwan", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "family" },
        { photo: "http://img.faceyourmanga.com/mangatars/0/565/565100/normal_627792.png", name: "Anisa", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "colleague" },
        { photo: "http://img.faceyourmanga.com/mangatars/0/439/439236/normal_627791.png", name: "Indah", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "friend" },
        { photo: "http://img.faceyourmanga.com/mangatars/0/565/565744/normal_627769.png", name: "Ani", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "family" }
    ];

    //define product model
    var Contact = Backbone.Model.extend({
    });

    //define directory collection
    var...