Backbone JS: Как очистить представления при переходе к другому URL-адресу?

У меня есть Homeview, который содержит несколько subviews на странице, когда я перехожу на другую страницу с помощью маршрутизатора, как я могу очищать существующие представления и создавать новые представления для страницы, на которую я хочу перейти?

В этом приложении нет модели/коллекций, просто просмотры.

Спасибо!

Часть кода:

Home = Backbone.View.extend({
    template: "static/js/templates/home.html",

    initialize: function() {
      _.bindAll(this);
      this.render();
    },

    render: function() {
      var view = this;

      // Fetch the template, render it to the View element and call done.
      namespace.fetchTemplate(this.template, function(tmpl) {
        view.el.innerHTML=tmpl();
        view.subRender();
      });

      return this;
    },
    subRender: function() {
      var view = this;
      var videoView = new Subview1({
        el: $('#wrapper1'),
        homeView: view
      });
      var timeView = new Subview2({
        el: $("#wrapper2")
      });
    }
 });

Ответ 1

Возможно, вы могли бы просто использовать механизм основных событий, чтобы сделать это, если хотите.

Вам просто нужно создать глобальный маршрутизатор событий, а затем каждый из ваших просмотров прослушать событие CloseView. Затем вам просто нужно выполнить все выключение при получении события CloseView.

var dispatcher = _.clone(Backbone.Events)

Home = Backbone.View.extend({
    ...
    initialize: function() {
        ...
        dispatcher.on( 'CloseView', this.close, this );
    }
    close: function() {
        // Unregister for event to stop memory leak
        dispatcher.off( 'CloseView', this.close, this );
        this.remove();
        this.unbind();
        this.views = [];   // Clear the view array
    }
    ...
});

SubView = Backbone.View.extend({
    ...
    initialize: function() {
        ...
        dispatcher.on( 'CloseView', this.close, this );
    }
    close: function() {
        // Unregister for event to stop memory leak
        dispatcher.off( 'CloseView', this.close, this );
        // Do other close stuff here.
    }
});

Тогда это всего лишь случай вызова dispatcher.trigger( 'OnClose' ) в вашем маршрутизаторе/в другом месте для запуска функций закрытия.

В качестве ярлыка, предполагая, что вы хотите выполнить это выключение при каждой навигации, вы можете просто зарегистрироваться для событий на маршрутизаторе (как пользовательское событие OnClose, как здесь, или событие "все", чтобы просто получить каждую навигацию) хотя вы должны быть осторожны, чтобы события были вызваны в том порядке, в котором вы ожидали.

Вероятно, также можно будет реорганизовать часть этого кода в Backbone.View.prototype или аналогичный, но я оставлю это для кого-то другого.

Ответ 2

Я храню под-представления в массиве и когда я закрываю "родительский" -view, используя функцию вида close(), перебираю массив и закрываю под-представления.

Это требует, чтобы Subview1 и Subview2 имели функции close().

Home = Backbone.View.extend({
    template: "static/js/templates/home.html",

    initialize: function() {
      _.bindAll(this);
      this.render();
      // Hold sub views
      this.views = [];
    },
    close: function() {
      this.remove();
      this.unbind();
      this.clear_views();
    },
    clear_views: function() {
      while this.views.length > 0
        this.views[0].close()
        this.views.splice(0, 1)
    },
    render: function() {
      var view = this;

      // Fetch the template, render it to the View element and call done.
      namespace.fetchTemplate(this.template, function(tmpl) {
        view.el.innerHTML=tmpl();
        view.subRender();
      });

      return this;
    },
    subRender: function() {
      var view = this;
      var videoView = new Subview1({
        el: $('#wrapper1'),
        homeView: view
      });
      this.views.push(videoView);
      var timeView = new Subview2({
        el: $("#wrapper2")
      });
      this.views.push(timeView);
    }
 });