templates

by gkohen

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.1.7/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js"></script>
<script id="discussions-template" type="text/html">
   <ol>
    <% _.each(discussions, function(discussion){ %>
        <%= inner_template({ discussion: discussion}) %>
    <% }); %>
  </ol>
</script>
        
<script id="discussion-template" type="text/html">
    <li>
        <article id="discussion_<%= discussion.get('cid') %>">
            <a class="section-arrow mir" href="#">toggle</a>
            <h3><%= discussion.get('text') %></h3>
        </article>           
    </li>
</script>
<div id="discussions"/>

JavaScript

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

var Discussions = Backbone.Collection.extend({
    model: Discussion
});

var DiscussionsView = Backbone.View.extend({
    initialize: function() {
        this.template       = _.template($('#discussions-template').html());
        this.inner_template = _.template($('#discussion-template') .html());
    },
    render: function() {
        this.el.html(this.template({
            discussions: this.collection.models,
            inner_template: this.inner_template
        }));
    }
});

var discussions = new Discussions([
    { text: 'D1'},
    { text: 'D2'},
    { text: 'D3'},
]);

new DiscussionsView({
    el: $('#discussions').first(),
    collection: discussions
}).render();