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

Question

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

У этого приложения нет моделей/коллекций, просто просмотров.

Спасибо!

Часть кода:

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") 
     }); 
    } 
}); 

Answer 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 или аналогичный, но я оставлю это для кого-то другого.

Answer 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); 
    } 
});