Backbone.js Study

by HYEONGJINKIM

HTML

<script src="http://documentcloud.github.io/underscore/underscore.js"></script>
<script src="http://documentcloud.github.io/backbone/backbone.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js"></script>
<form id="addBook" action="#">
<div><label for="coverImage">CoverImage: </label><input id="coverImage" type="file" />
<label for="title">Title: </label><input id="title" type="text" />
<label for="author">Author: </label><input id="author" type="text" />
<label for="releaseDate">Release date: </label><input id="releaseDate" type="text" />
<label for="keywords">Keywords: </label><input id="keywords" type="text" />
<button id="add">Add</button></div>
</form>
<div id="books">
    <div class="bookContainer">
        <img src="img/placeholder.png" />
        <ul>
            <li>Title</li>
            <li>Author</li>
            <li>Release date</li>
            <li>Keywords</li>
        </ul>
    </div>
</div>

<script id="bookTemplate" type="text/template">
<img src="<%= coverImage %>"/>
<ul>
<li><%= title %></li>
<li><%= author %></li>
<li><%= releaseDate %></li>
<li><%= keywords %></li>
</ul>
    <button class="delete">Delete</button>
</script>

CSS

body {
    background-color: #eee;
}
.bookContainer {
    border: 1px solid #aaa;
    width: 300px;
    height: 130px;
    background-color: #fff;
    float: left;
    margin: 5px;
}
.bookContainer img {
    float: left;
    margin: 10px;
}
.bookContainer ul {
    list-style-type: none;
}

#addBook label {
width:100px;
margin-right:10px;
text-align:right;
line-height:25px;
}
#addBook label, #addBook input {
display:block;
margin-bottom:10px;
float:left;
}
#addBook label[for="title"], #addBook label[for="releaseDate"] {
clear:both;
}
#addBook button {
display:block;
margin:5px 20px 10px 10px;
float: right;
clear: both;
}
#addBook div {
width: 550px;
}
#addBook div:after {
content:"";
display:block;
height:0;
visibility:hidden;
clear:both;
font-size:0;
line-height:0;
}

.bookContainer ul {
list-style-type: none;
margin-bottom: 0;
}
.bookContainer button {
float:right;
    margin: 10px;
}

JavaScript

var Book = Backbone.Model.extend({
    defaults: {
        coverImage: "http://lorempixel.com/100/110/people/",
        title: "No title",
        author: "Unknown",
        releaseDate: "Unknown",
        keywords: "None"
    }
});
var BookView = Backbone.View.extend({
    tagName: "div",
    className: "bookContainer",
    template: $("#bookTemplate").html(),
    events: {
        "click .delete": "deleteBook"
    },
    render: function () {
        var tmpl = _.template(this.template);
        this.$el.html(tmpl(this.model.toJSON()));
        return this;
    },
    deleteBook:function () {
        //모 델 을 삭 제 한 다 .
        this.model.destroy();
        //뷰 를 삭 제 한 다 .
        this.remove();
    }
});
var book = new Book({
    title: "Some title",
    author: "John Doe",
    releaseDate: "2012",
    keywords: "JavaScript Programming"
});
bookView = new BookView({
    model: book
});
$("#books").html(bookView.render().el);

var books = [{
    title: "JS the good parts",
    author: "John Doe",
    releaseDate: "2012",
    keywords: "JavaScript Programming"
}, {
    title: "CS the better parts",
    author: "John Doe",
    releaseDate: "2012",
    keywords: "CoffeeScript Programming"
}, {
    title: "Scala for the impatient",
    author: "John Doe",
    releaseDate: "2012",
    keywords: "Scala Programming"
}, {
    title: "American Psyco",
    author: "Bret Easton Ellis",
    releaseDate: "2012",
    keywords: "Novel Splatter"
}, {
    title: "Eloquent JavaScript",
    author: "John Doe",
    releaseDate: "2012",
    keywords: "JavaScript Programming"
}]

var Library = Backbone.Collection.extend({
    model: Book,
    localStorage: new window.Store("backbone-books")
    //localStorage: new Store("backbone-books")
    //model: new Store('backbone-books')
});



var LibraryView = Backbone.View.extend({
    el: $("#books"),
    initialize: function () {
        //this.collection = new Library(books);
        this.collection = new Library();
       ...