跨路由持久化模型和视图的设计模式答案

【问题标题】：Design pattern for persisting model and view across routes跨路由持久化模型和视图的设计模式
【发布时间】：2014-03-10 16:43:33
【问题描述】：

假设我在/search 有一个搜索表单，QueryView 代表搜索表单。当用户提交查询时，我想路由到/results 并为结果添加ResultView，保留QueryView 以防用户想要进行新的搜索。

然后，如果用户直接导航到/results，我必须在路由函数中同时创建QueryView 和ResultsView。问题是我希望 /search 和 /results 路由中的行为相同，但必须记住在这两个地方进行任何更改。

另一种方法是在用户提交时触发/results的路由，这将破坏现有的QueryView并创建一个新的QueryView和ResultView。这可行，但在我的情况下，销毁和重新创建 QueryView 会引起一些烦恼。

是否有标准的设计模式来跨路由保留视图，而无需在两个地方创建视图的代码？

【问题讨论】：

标签： javascript backbone.js backbone-views backbone-routing

【解决方案1】：

您可以将共享行为放入路由器的方法中，然后让两个路由都调用该方法。

要缓存您的QueryView，您只需将其设为Router 的属性即可。在您的 /search 和 /results 路由中，只需执行以下操作：

this.queryView = this.queryView || new QueryView();
this.queryView.doWhatever();

【讨论】：

并没有真正回答我的问题。即使两者都调用相同的函数，在一种情况下 QueryView 已经存在，而在另一种情况下，需要创建 QueryView。

【解决方案2】：

我最终写了一个ViewManager class 来处理跨路由的持久视图。示例用法：

// On load
var FooView = Backbone.View.extend({ ... });
var BarView = Backbone.View.extend({ ... });
var vm = new ViewManager({selector: ".content");

// On route
var foo = vm.getView(FooView, {}, true);
vm.showViews([foo]);

// On another route
var foo = vm.getView(FooView, {}, true);
var bar = vm.getView(BarView, {}, true);
vm.showViews([foo, bar]);

【讨论】：