Backbone View

by pauljeter

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script type="text/template" id="list_template">
  <h2>Books List</h2>
  <h3>Title: <%= title %></h3>
  <h4>Author: <%= author %></h4>
  <button>Re-render</button>
</script>

<div id="list_container">
    <button>Click the button to render</button>
</div>

JavaScript

var Book = Backbone.Model.extend({
    defaults: {
        title: 'Not specified',
        author: 'Not specified'
    },
    initialize: function() {
        console.log("Take a look, It's in a book, A Reading Rainbow!");
    }
});

var book1 = new Book({ title: 'To Kill a Mockingbird', author: 'Harper Lee' });

ListView = Backbone.View.extend({
    events: {
        "click button": "render"
    },
    initialize: function(){
        console.log("Reading is Fun!");
        //this.render();
    },
    template: _.template($("#list_template").html()),
    render: function() {
        this.$el.html(this.template(this.model.attributes));
        return this;
    }
});

var list_view = new ListView({ el: $("#list_container"), model: book1 });