单个页面应用程序中的多个区域/部分。 杜兰达和淘汰赛方法

Question

我将一个单页面应用程序放在一起，其中页面上有多个部分/区域（例如，一列是左侧三分之一的宽度，一列是右侧相似的宽度），在这里我可以交换使用关联的视图模型输入和输出不同的视图。

例如，在加载页面时，我正在显示产品列表。 然后，用户可以单击产品，详细信息显示在屏幕中间，最右边的部分是有关成本和制造的计算。 单个页面就可以，但是用户可以进入“编辑模式”，在那里他们可以更改所选产品的组件。

当用户进入编辑模式时，我想用原材料列表代替左栏中的产品列表。 理想情况下，如果可能的话，我希望能够提供对此更改的过渡效果。 我想有点像asp.net/ajax手风琴面板，甚至是标签视图。

事实是，由于我使用的是durandal，因此我认为这希望“导航”到单独的页面/视图/模型，以使http://myapp.com/#/products变为http://myapp.com /＃/ editproduct，但我想保持中间和右列x不变，只在左列中加载新视图，将原始产品列表视图保留在内存中，这样一来，退出编辑模式后，用户将立即返回它们在左侧的产品列表中的位置。

我对这一切都很陌生，以至于我还不知道我要寻找的术语，因此很难有效地进行谷歌搜索。 我们将不胜感激地收到一些有关如何最好地组织这类事情的建议，谢谢！

Answer 1

您有很多选择。 我想指出这些是因为您有一个非常复杂的问题-

1. Durandal为您的情况提供了非常实际的支持。 这是一项付费服务​​，但听起来您需要有关体系结构的深入技术指导，而不仅仅是一个小的代码建议。
2. 您可以利用自己的应用程序发挥创造力，以实现所需的功能。 请记住，使用Knockout的视图合成，您可以随时使用标准逻辑显示所需的任何内容-

<div>
    <!-- ko if: showingMyView() -->
        <!-- ko compose: { view: 'fights/fight-small' } --><!-- /ko -->
    <!-- /ko -->
</div>

这是一个非常简单的例子。 您可能应该对实际应用程序有更深入的了解。