Нужна помощь с шаблонами подчеркивания - коллекции шаблонов

Я использую 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
person Hcabnettek    schedule 18.10.2011    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Я думаю, что вам нужно написать код цикла, но вы можете его очистить, имея цикл в представлении, а не в шаблоне. Таким образом, у вас будет один шаблон для контейнера (который содержит <ol>) и другой для рендеринга <li>.

Для каждого элемента, представляющего собой набор элементов, вы можете использовать ту же технику, при этом эти модели добавляются к <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>
person kreek    schedule 18.10.2011

arrow_upward
5
arrow_downward

У вас может быть два шаблона, один для списка и один для внутренних элементов. А в шаблоне списка просто напечатайте результат внутреннего: http://jsfiddle.net/dira/hRe77/8/

Шаблоны Underscore очень просты и не имеют никакого умного поведения/магии: http://documentcloud.github.com/underscore/docs/underscore.html#section-120

person dira    schedule 18.10.2011
comment
Спасибо за jsfiddle. Очень помог - person IcedDante; 27.11.2014

arrow_upward
0
arrow_downward

Вам нужна более компетентная система шаблонов. Шаблоны Underscore очень минимальны, без встроенной поддержки циклов и тому подобного. Может быть, вам больше подходят шаблоны Mustache? (Примечание: по какой-то странной причине он называется без логики. С поддержкой как рекурсии, так и лямбда-выражения я бы сказал, что вы как минимум на полпути к Scheme, но я отвлекся..)

person Jacob Oscarson    schedule 19.10.2011