Backbone: предзагрузка вьюшек

Question

[Артур Заяц]

Есть html-страница, часть из которой (некий список с кнопочками) обрабатывается при помощи backbone. (коллекция + модель + вид для коллекции + вид для модели). Необходимо сделать так, чтобы при первоначальной загрузке html-страницы с сервера, сразу же отображалось первоначальное состояние этого списка. То-есть список должен быть сгенерирован сервером, а потом backbone должен подхватить его.

С коллекцией проблем нет. Делаю в html-шаблоне страницы так:
<script> myCollection.reset({{myList}}); </script>

А вот как подцепить вьюхи не въезжаю. Есть идеи? Может кто ссылочку подскажет соответствующую?

Answer 1

[Артур Заяц]

Решение оказалось простым: у въюшек есть фунция setElement, которой можно привязать к ней уже срендеренный HTML. Она же и обработчики переподвязывает.

Comments

[Александр]

Значит я неправильно изначально понял :-)
Если привязка существующих данных к коллекции не нужна (моё понимание «backbone должен подхватить»), то конечно можно setElement или даже проще — передать параметр el при создании вьюшки.

Answer 2

[Александр]

Правильная backbone-view работает либо с коллекцией либо с моделью.
Твоя view работает с коллекцией.

В initialize вешаешься на событие sync — вызов render.
В render делаешь проверку this.collection.isEmpty()
Если не пуста — отрисовываешь.

При создании view сразу же вызываешь render.
Тогда независимо от порядка загрузки всё будет отрисовано.

Comments

[Артур Заяц]

У меня одна вьюшка привязана к коллекции, в ней, соответственно вьюшки, привязанные к модели.
Я возможно недостаточно понятно сформулировал вопрос: можно ли вьюшки (коллекции и моделей) подцепить к уже сформированному сервером html-ю? Я не хочу еще раз отрисовывать html, ведь он уже создан сервером.
Но при этом хотелось бы вьюшки бекбона подцепить к уже созданному сервером html-ю, чтобы правильно отрабатывались события, правильно делался destroy.

[Александр]

С HTML-ом будет сложновато.
А вот если сервер может JSON формировать — то очень просто

class Event extends Backbone.Model
class Events extends Backbone.Collection
    model: Event
class EventsView extends Backbone.View
    initialize: -> @collection.on "sync add", @render, @
    render: ->
        results = []
        if @collection.isEmpty()
            @$el.html "Empty Collection"
        else
            results = @collection.map (model) -> "#{model.get('id')} --- #{model.get('text')}"
            @$el.html results.join("<br />")
        
events = new Events([{id:1, text: "Google"}, {id:2, text: "Yahoo"}])
view = new EventsView collection: events, el: "body"
view.render()
                    
events.add({id:6, text: "HuffingtonPost"})

Код упрощён, но как видно коллекция создаётся со стартовыми значениями.