Как сделать render списка используя шаблон для него (Underscore/Backbone)?

Question

[Вадим Белкин]

Есть следующий шаблон для списка

<ul class="nav">
     <li><a href="#<%= name %>"><%= heading %></a></li>
</ul>

Есть массив, из которого создаётся коллекция.

var sections = [
    { name: 'page1', heading: 'Page 1' },
    { name: 'page2', heading: 'Page 2' },
    { name: 'page3', heading: 'Page 3' }
  ];

Сделал VIEW для будущего списка, куда передаётся созданная коллекция. А вот как выполнить render в одном VIEWиспользуя один шаблон не знаю.

Answer 1

[Алексей Куреев]

Ну, в цикле итерируете элементы коллекции и для каждого элемента создаете li > a, как показано в задании. После того, как все элементы списка созданы, просто вставляете в узел ul, который можете создать через document.createElement.

Можно так же сначало создать элемент ul, а потом в цикле добавлять ему детей(li > a), но такой подход заведомо медленнее, т.к. в этом случае работы с DOM в N раз больше.

Я считаю, что стоит думать в этом направлении:

render: function(collection) {
    var ul = document.createElement("ul"),
        fragment = document.createDocumentFragment();

    collection.each(function(item) {
        // Здесь формируете элемент списка (element)
        fragment.appendChild(element);
    });

    return ul.appendChild(fragment);
}

Answer 2

[Вадим Белкин]

Как раз хотелось бы отойти от такого подхода. Чтобы сам список ul > li > a хранился в шаблоне и во VIEW он только заполнялся данными и уже готовый вставлялся в нужное место.

Answer 3

[Василий Останин]

Посмотрите в сторону Marionette. Сильно упрощает жизнь.