My Backbone Card Identity 2

Learn to list data use backbonejs, add filter type

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>
            </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>
        </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 = [
        { 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
    var Contact = Backbone.Model.extend({
        defaults: {
            photo: "http://img.faceyourmanga.com/mangatars/0/566/566210/normal_627702.png"
        }
    });

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

    //define individual contact view
    var 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;
        }
    });

    //define master view
    var DirectoryView = Backbone.View.extend({
        el: $("#contacts"),

        initialize: function () {
   ...