在路由 backbone js 中处理视图

Question

当用户导航到不同的 url 时，切换到不同视图的最佳方式是什么。在 angular 中有 ng-view 负责处理这个问题并插入相应的模板，在 ember 中它是基于所有路由的。

使用 css 或销毁其他视图并插入当前视图仅在路由中隐藏其他视图元素更好吗？

编辑

如果有人可以举例说明如何在再次导航回视图并恢复其先前状态时重新呈现视图，那就太好了。

例如。

如果您在视图中有一个复选框，用户可以 select 将一些项目添加到购物车，但在中间 he/she 移动到其他一些 url 并且然后回来，应该选中该复选框。

Answer 1

我会有一个带有子视图的主内容视图，并在其上调用 remove，它也负责清理所有子视图（首先在它们上调用 remove 并在层次结构树中向上移动）。 backbone 并没有免费提供子视图的概念，但并不难实现。最后附上一个新的内容视图。

这确保您可以进行清理并且浏览器使用的资源量一致。

我会把它抽象成某种布局视图，它有一个内容子视图和一个类似 setContent(view) 的函数，它处理任何现有内容视图的删除和新内容视图的附加。

就我个人而言，我会在模块中有一个带有子路由器的路由器，例如一个主路由器，它找到一个以 "checkout" 开头的路由，并将其传递给结帐模块中的一个子路由器，该子路由器负责附加一个新的内容视图。

在 Backbone 中，实施取决于您，这有好有坏，取决于您做得有多好 ;)

Answer 2

总是删除视图而不是仅仅隐藏它。如果你没有正确地删除（和取消绑定）你的视图，所有绑定、处理程序和对 models/DOM 元素的引用将徘徊。

根据您的应用程序的大小，您可以拥有一个处理布局的模块（如 dominic-tobias 所建议的那样），或者在路由器上拥有一个方法来为您处理这个问题。在最基本的情况下，此方法（我们称它为 _switchView）获取一个视图并保存到 currentView 的一个实例上。视图更改后，它会删除当前视图，将新视图设置为当前视图，然后将其呈现给 DOM。

像这样：

_switchView(view) {
  this.currentView && this.currentView.remove();
  this.currentView = view;
  this.$rootEl.html(view.render().$el);
}

在路由 backbone js 中处理视图

Handle Views in routing backbone js

backbone.js

backbone-views

backbone-routing