Need help with template templates - collection templates

Question

I am using underscore.js for templates. Here is a sample template.

<script id="discussion-template" type="text/html">
    [[ _.each(discussions, function(topic){ ]]
       <li>
           <article id="{{ topic.htmlId() }}">
               <a class="section-arrow mir" href="#">toggle</a>
               <h3>{{ topic.get('text') }}</h3>
               <ol></ol>
           </article>           
       </li>
    [[ }); ]]
</script>

Inside backbone.js view.render () I pass the collection to the template.

this.el.append(this.template({ discussions: this.collection.models }));

My question is here, do I need to write loop code? Can I not just go through the collection, but the underline is smart enough to display one element for each element in the collection? Also, does underscore.js provide something for nesting templates? Each item in the collection does contain a set of items that I will need to display. How can I call another template from this template. Any links, tips and / or tutorials are of course greatly appreciated.

Thank!

Answer 1

, , , , . , ( <ol>), - <li> s.

, , , <ol class="topic-collection-will-append-to-this"> .

, 100% , :)

window.TopicView = Backbone.View.extend({
    template: _.template($("#topic-template").html()),
    tag: 'li',
    className: 'topic',

    initialize: function() {
        _.bindAll(this, 'render');
    },

    render: function() {
        $(this.el).html(this.template({topic: this.model}));
        return this;
    }
});

window.DiscussionView = Backbone.View.extend({
    tagName: 'section',
    className: 'discussion',
    template: _.template($('#discussion-template').html()),

    initialize: function() {
        _.bindAll(this, 'render');
        this.collection.bind('reset', this.render);
    },

    render: function() {
        var $topics,
        collection = this.collection;

        $(this.el).html(this.template({}));
        $topics = this.$(".topics");
        this.collection.each(function(topic) {
            var view = new TopicView({
                model: topic
            });
            $topics.append(view.render().el);
        });

        return this;
    }
});

<script id="topic-template" type="text/html">
    <article id="{{ topic.htmlId() }}">
        <a class="section-arrow mir" href="#">toggle</a>
        <h3>{{ topic.get('text') }}</h3>
        <ol class="topic-collection-will-append-to-this">
        </ol>
    </article>           
</script>

<script type="text/template" id="discussion-template">
    ...
    <ol class="topics">
    </ol>
</script>

Answer 2

: . : http://jsfiddle.net/dira/hRe77/8/

/: http://documentcloud.github.com/underscore/docs/underscore.html#section-120

Answer 3

, , - . , .. Maybee Mustache ? (Sidenote: - ). , , ..)