用于多个选项卡和模块化的 knockoutjs 设计模式答案

【问题标题】：knockoutjs design pattern for multiple tabs and modularization用于多个选项卡和模块化的 knockoutjs 设计模式
【发布时间】：2015-04-02 04:43:20
【问题描述】：

我一直在努力寻找构建/设计我经常使用的应用程序布局的最佳方法。

一般构建是一个 SPA，其中包含用于不同信息位的选项卡。我目前使用引导选项卡和单个视图模型。我想做的是使用不同的视图模型/组件/每个选项卡更好地模块化它。

当用户与选项卡交互时，他们的操作会影响其他选项卡的结果。 IE 选项卡 1 单击将数据发送到选项卡 2 以根据这些值刷新表。

当用户在标签之间导航时，我需要保存“状态”或排序/页面/过滤器/等。

我研究过使用诸如淘汰组件、淘汰多视图模型（使用邮递员）、durandal、淘汰/需要组合之类的东西。

任何成功的实施或其他想法将不胜感激。

【问题讨论】：

标签： javascript jquery knockout.js

【解决方案1】：

我曾尝试采用香草 Knockout 路线进行 SPA 开发，但它变得具有挑战性。

我建议使用像 Durandal 这样的库，因为它提供了 SPA 开发所需的所有组件。 Durandal 使用 Knockout 作为其双向绑定框架，因此它应该是一个简单的过渡。您需要为每个选项卡设置路线，然后相应地设置导航样式。通常，我会为特定页面使用一个视图/视图模型。在您的情况下，每个选项卡将是一个视图/视图模型。

在您的应用程序逻辑中，当您更新一个选项卡上的信息时，您需要通过 AJAX 向您的服务器发送一个 POST 以更新其他选项卡的其他视图模型的“状态”。

【讨论】：

谢谢，我玩了一下 durandal（不是很多），感觉自己在标签之间失去了“状态”。 IE 它将不得不再次调用数据，我会失去我的排序/过滤器/等等......也许我只需要更深入地研究。
如果您将当前视图模型保存到会话或本地存储中，您可以在导航回上一个选项卡时恢复视图模型。