Module 4: Underscore Templates

by emgee

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<div id="example1-output-container"></div>

<div id="example2-output-container"></div>

<script id="latlon-template" type="text/html">
    <hr>
    <p>Latitude: <%= lat %></p>
    <p>Longitude: <%= lon %></p>
        <% _([1,2,3]).each(function(number){ %>
            <p><%= number %></p>
        <%}); %>
</script>

JavaScript

var V = Backbone.View.extend({
    el: "#example1-output-container",
    render: function(){
        var data = {lat: -27, lon: 153};
        this.$el.html(
            _.template("Latitude: <%= lat %> / Longitude: <%= lon %>")(data));
        return this;
    }
});  
var v = new V();
v.render();

var V2 = Backbone.View.extend({
    render: function(){
        var data = {lat: -27, lon: 153};
        var template = $("#latlon-template").html();
        this.$el.html(_.template(template)(data));
        return this;
    }
});  

var v2 = new V2({el:"#example2-output-container"});
v2.render();