销毁或替换主干 JS 视图，当发生路由更改时

Question

我对骨干JS视图有问题。当发生路由更改时，它会根据路由函数创建新视图。但之前的观点也存在。因此存在多个视图并且无法执行 在每条路线的顶部，我想删除当前视图，然后为其分配新视图。 这是我的主文件.js

文件

return Backbone.Router.extend({
routes: {
"": "viewHome",
"about": "viewAbout",
"find-courses": "findCourses",
"courses": "viewCourses",
"*other": "defaultRoute"
},
viewCourses: function () {
var courseCollection = new Courses();
var fetchDone = function () {
if(courseView && courseView.remove) courseView.remove();
this.courseView = new CoursesView({
collection: courseCollection
});
this.courseView.render();
};
var options = {
success: _.bind(fetchDone, this),
error: this.onError
};
courseCollection.fetch(options);
},
onError: function () {
alert('Some Error!');
},
viewAbout: function () {
this.aboutView = new AboutView();
this.aboutView.render();
}

你能帮我解决这个问题吗？

Answer 1

你可以做类似的事情

if(this.currentView) {
this.currentView.remove();
}
this.currentView = new AboutView();

在每条路线上。

当然，您可以通过将其提取到一个单独的方法中来改进它，该方法在规模增加时接受新的视图构造函数，例如

return Backbone.Router.extend({
routes: {
"courses": "viewCourses",
"about": "viewAbout",
},
viewCourses: function () {
var courseCollection = new Courses();
courseCollection.fetch()
.done((response => {
const courseView = this.renderView(CoursesView, {
collection: courseCollection
});
})
.fail(this.onError);
},
viewAbout: function () {
const aboutView = this.renderView(AboutView);
},
renderView(View, viewOptions) {
this.currentView && this.currentView.remove();
this.currentView = new View(viewOptions);
this.currentView.render();
return this.currentView;
}