Backbone Template

Backbone Template

by Nirvanachain

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<div id="main"></div>

<script type="text/template" id="the-template">
    <li><%- data.color %></li>
    
    <% //Log the current model that the template uses %>
    <% console.log('template model =',data) %>
</script>

JavaScript

var jsonData = {
    "color": "red"
};


var TheModel = Backbone.Model.extend({    
});



var TheView = Backbone.View.extend({
    el: '#main',
    
    tagName: 'ul',
    
    template: _.template( $('#the-template').html() ),
    
    render: function () {
        var tmpl = this.template({data: this.model.toJSON()});
        
        this.$el.html( tmpl );
    }
});

var theModel = new TheModel(jsonData);

var theView = new TheView({model: theModel});
theView.render();