Подчеркните, нужна помощь шаблонов - коллекции шаблонов - PullRequest
Новая
       8

Подчеркните, нужна помощь шаблонов - коллекции шаблонов

5 голосов
/ 19 октября 2011

Я использую 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 предоставляет что-то для шаблонов вложенности?Каждый элемент в коллекции на самом деле имеет коллекцию предметов, которые мне также нужно будет отрендерить.Как я могу вызвать другой шаблон из этого шаблона.Любые ссылки, советы и / или учебные пособия, конечно, очень ценятся.

Спасибо!

Ответы [ 3 ]

5 голосов
/ 19 октября 2011

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

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

5 голосов
/ 19 октября 2011

Я думаю, что вы действительно должны написать код цикла, но вы можете очистить его, имея цикл в представлении, а не в шаблоне.Таким образом, у вас будет один шаблон для контейнера (который содержит <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>
0 голосов
/ 19 октября 2011

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

...