Повторное использование представлений в backbonejs

Я хочу отобразить представление и его дочерние представления без потери связанных событий. Прямо сейчас я визуализирую основной вид один раз, а затем добавляю его дочерние представления к элементу. Когда родительское представление снова отображается, оно стирает el, к которому были привязаны дочерние представления.

Вот что у меня сейчас:

render: function() {     
    var html = this.template({model:this.model.toJSON(), otherModel:window.otherModel.toJSON()});

    this.$el.html(html);
    this.openList();
}

OpenList: function(){
    if(typeof(this.ListView)=="undefined"){
        this.ListView = new App.ListView({el:this.$("#ListView-tab"),collection:this.model.list});
    }
    this.ListView.collection.fetch();
}

Я читал о нескольких подходах к исправлению этого:

а) заливка рендеринга

эта опция поместит начальный рендеринг в initialize, а затем в функцию render добавит информацию с помощью jquery

  initialize: function() {
      var html = this.template({model:this.model.toJSON(), otherModel:window.otherModel.toJSON()});

}

 render: function() {     
    this.$('.title').text(this.model.get('title'));
    this.$('.date').text(this.model.get('date'));

}

б) Отсоединение и делегирование событий

detach() дочерний элемент el, повторное добавление и delegateEvents() представление каждый раз, когда мы визуализируем родительское представление

render: function() {
    if(typeof(this.ListView)!="undefined"){
        this.ListView.$el.detach
    }     
    var html = this.template({model:this.model.toJSON(), otherModel:window.otherModel.toJSON()});

    this.$el.html(html);
    this.openList();
}

OpenList: function(){
    if(typeof(this.ListView)=="undefined"){
        this.ListView = new App.ListView({collection:this.model.list});
    }
    if(this.ListView.$el.parent().length)this.$("#ListView-tab").append(this.ListView.el); //if not already appended
    this.ListView.collection.fetch();
    this.ListView.delegateEvents();
}

c) последним вариантом было бы оставить большую часть моего кода как есть и просто поместить следующий код в render родительского представления

if(typeof(this.ListView)!="undefined"){
    this.ListView=undefined;
}

это приведет к аннулированию дочернего представления и его воссозданию каждый раз при отображении основного представления.

Есть ли проблемы с методами, которые я опубликовал? Я склоняюсь к варианту c), так как это самый простой способ убедиться, что все будет воссоздано и все его события будут работать.


person Community    schedule 22.08.2012    source источник