需要下划线模板帮助 - 模板集合答案

【问题标题】：Underscore templating help needed - templating collections需要下划线模板帮助 - 模板集合
【发布时间】：2011-12-10 10:53:05
【问题描述】：

我正在使用 underscore.js 进行模板化。这是一个示例模板。

<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>

在backbone.js view.render() 中，我将一个集合传递给模板。

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

我的问题是，我必须编写循环代码吗？我可以不只是传递一个集合并下划线足够聪明以在集合中为每个项目呈现一个项目吗？ underscore.js 是否也为嵌套模板提供了一些东西？集合中的每个项目实际上都有一个我需要渲染的项目集合。如何从该模板中调用另一个模板。非常感谢任何链接、提示和/或教程。

谢谢！

【问题讨论】：

标签： javascript templates backbone.js underscore.js backbone-relational

【解决方案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>

【讨论】：

【解决方案2】：

您可以有两个模板，一个用于列表，一个用于内部元素。在列表模板中只打印内部的结果：http://jsfiddle.net/dira/hRe77/8/

Underscore 的模板非常简单，没有附加任何智能行为/魔法：http://documentcloud.github.com/underscore/docs/underscore.html#section-120

【讨论】：

感谢 jsfiddle。帮了大忙

【解决方案3】：

您正在寻找的是更强大的模板系统。 Underscore 的模板非常少，没有对循环等的内置支持。 Maybee Mustache 模板更适合您？ （旁注：由于某种奇怪的原因，它被称为无逻辑。在递归和 lambda 支持的情况下，我想说你至少是 Scheme 的一半，但我离题了..）

【讨论】：