My Backbone Book Part 1

Book with console

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="books">
   <header>
      <div id="filter"><label>Show me:</label></div>
      <button id="showForm" href="#">Add new book</button>
      <form id="addBook" 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="judul">Judul:</label><input id="judul"/>
           <label for="subJudul">Sub Judul:</label><input id="subJudul"/>
           <label for="isbn">ISBN:</label><input id="isbn" />
           <label for="bibliografi">Bibliografi:</label><input id="bibliografi"/>
           <button id="add">Add</button>
      </form>
    </header>
</div>
<script id="bookTemplate" type="text/template">
    <img src="<%= photo %>" alt="<%= kode %>" />
    <h3><%= kode %></h3><span><%= type %></span>
    <div><%= judul %></div>
    <div><%= subJudul %></div>
    <dl>
       <dt>ISBN:</dt><dd><%= isbn %></dd>
       <dt>Bibliografi:</dt><dd><%= bibliografi %></dd>
    </dl>
    <br>
    <button class="delete">Delete</button>
    <button class="edit">Edit</button>
</script>
        <script id="bookEditTemplate" 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="judul" value="<%= judul %>" />
                <input class="subJudul" value="<%= subJudul %>" />
                <input class="isbn" value="<%= isbn %>" />
                <input class="bibliografi" value="<%= bibliografi %>" />
                <dl>
                <button class="save...

CSS

#books{ width:1300px; margin:auto; }
.book-container { width:466px; padding:10px; border:5px solid #aaa; margin:0 10px 10px 0; position:relative; float:left; font-family:sans-serif; color:#333; background-color:#eee; }
.book-container h1 { margin:0; font-weight:normal; }
.book-container h1 span { float:right; font-size:14px; line-height:24px; font-weight:normal; }
.book-container img { border-width:1px; border-style:solid; border-color:#fff; border-right-color:#aaa; border-bottom-color:#aaa; margin-right:10px; float:left; }
.book-container div { margin-bottom:24px; font-size:14px; }
.book-container a { color:#333;}
.book-container dl { margin:0; float:left; font-size:14px; }
.book-container dt, .book-container dd { margin:0; float:left; }
.book-container dt { width:80px; clear:left; }
.book-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; }
#addBook { display: none;width: 500px;float: right;clear: both;font-family: sans-serif;font-size: 14px; }
#addBook label { width:70px; margin-right:10px; text-align:right; line-height:25px; }
#addBook label, #addBook input { display:block; margin-bottom:10px; float:left; }
#judul{ width:380px; margin-left:2px; }
#subJudul { width:380px; margin-left:2px; }
#addBook label[for="kode"], #addBook label[for="judul"],#addBook label[for="subJudul"], #addBook label[for="isbn"] { clear:both; }
#addBook button { display:block; margin:10px 10px 0 0; float:right; clear:both; }
.book-container input, .book-container select { display:block; margin:0; float:left; }
.book-container .kode, .book-container .judul,.book-container .subJudul { clear:left; }
.book-container input { margin:0 10px 3px 0; }
.book-container .judul { width:395px; margin-right:0; }
.book-container .subJudul { width:395px; margin-right:0; }
.book-container .isbn{ width:90px;...

JavaScript

(function ($) {
    //demo data
    var books = [
        { photo: "http://www.apress.com/media/catalog/product/cache/9/small_image/80x/040ec09b1e35df139433887a97daa66f/A/9/A9781430244646-small.png",kode: "001", judul: "Processing Creative Coding and Generative Art in Processing 2",subJudul:"Creative Coding", isbn: "978-1-4302-4464-6", bibliografi: "400 Halaman", type: "Index" },
        { photo: "http://img.faceyourmanga.com/mangatars/0/566/566210/normal_627702.png",kode: "002", judul: "Pro Android Web Game Apps Using HTML5, CSS3 and JavaScript",subJudul:"Foundation Game Design with HTML5 and JavaScript", isbn: "0123456789", bibliografi: "Cetakan 2", type: "family" },
        { photo: "http://img.faceyourmanga.com/mangatars/0/566/566210/normal_627702.png",kode: "003", judul: "Pro Android Web Game Apps Using HTML5, CSS3 and JavaScript",subJudul:"Foundation Game Design with HTML5 and JavaScript", isbn: "0123456789", bibliografi: "Edisi Revisi", type: "friend" },
        { photo: "http://img.faceyourmanga.com/mangatars/0/566/566210/normal_627702.png",kode: "004", judul: "Pro Android Web Game Apps Using HTML5, CSS3 and JavaScript",subJudul:"Foundation Game Design with HTML5 and JavaScript", isbn: "0123456789", bibliografi: "Cetakan Ulang", type: "colleague" },
        { photo: "http://img.faceyourmanga.com/mangatars/0/566/566210/normal_627702.png",kode: "005", judul: "Pro Android Web Game Apps Using HTML5, CSS3 and JavaScript",subJudul:"Foundation Game Design with HTML5 and JavaScript", isbn: "0123456789", bibliografi: "Cetakan 2", type: "family" },
        { photo: "http://img.faceyourmanga.com/mangatars/0/566/566210/normal_627702.png",kode: "006", judul: "Pro Android Web Game Apps Using HTML5, CSS3 and JavaScript",subJudul:"Foundation Game Design with HTML5 and JavaScript", isbn: "0123456789", bibliografi: "Cetakan 4", type: "colleague" },
        { photo: "http://img.faceyourmanga.com/mangatars/0/566/566210/normal_627702.png",kode: "007", judul: "Pro Android Web...