淘汰赛 SPA：不同的布局（母版页）答案

【问题标题】：Knockout SPA: Different Layouts(Master pages)淘汰赛 SPA：不同的布局（母版页）
【发布时间】：2014-10-24 08:30:47
【问题描述】：

我正在使用 knockout.js 构建 SPA 应用程序。基本上我所做的是将 ko 组件绑定为当前页面，具体取决于路由是什么。它看起来像

<div id="currentPage" data-bind="component: { name: currentRoute.page,
                                              attr: currentRoute }>
</div>

这是针对当前页面和布局的整个图片：

<html>
    <head></head>
    <body>
        <div data-bind="component: {name: "nav"}></div>
        <div data-bind="component: {name: "aside"}></div>     
        <div id="currentPage" data-bind="component: {  name: currentRoute.page, 
                                                       attr: currentRoute}">
        </div>
    </body
</html>

问题是我没有一个布局..另一个看起来像这样（伪使用）

 <html>
    <body>
         <wrapper>
               <currentPage>
         </wrapper>
    </body
</html>

所以基本上第一个布局不是 currentPage 模块的直接父级，但第二个是..

我能想到的动态布局变化的变体是

在每个页面中指定布局组件。但我认为这不是一个好主意，因为我将一遍又一遍地编写相同的代码，并且由于何时无法在布局组件中保持状态我更改了下一页布局将被重新创建（不完全但足以放松状态）
布局与 currentPage 组件是分开的，因此只会更改 currentComponent 绑定。这非常适合在布局中保持状态，但当我有需要不同布局的变体时并不好，例如包装器组件绑定..

如果有人分享如何解决此类问题的新想法，我将非常高兴。

【问题讨论】：

标签： javascript knockout.js single-page-application

【解决方案1】：

在淘汰赛中，如果要动态更改视图的任何部分，则必须将绑定附加到视图。您说页面的外部布局取决于正在显示的内部页面，因此从逻辑上讲，我认为它是该页面视图定义的一部分。这就是为什么我不会寻找一些特殊的方法来处理这种情况。

如果我没有遗漏什么，那么在这种情况下，合理的做法是在每个页面中包含布局。然后，您可以使用“传统”方法使用剔除模板（尤其是来自 http://knockoutjs.com/documentation/template-binding.html 的动态模板的注释 5）和代码提取来处理重复代码。

您可能想要采取的完全其他方法是将所有布局放在母版页中，然后使用“if”和“visible”等绑定来控制它们。

【讨论】：

我无法在每个页面中定义布局，因为我需要保持状态。为了更清楚，我更新了我的问题