Question

我正在使用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绑定..这对于在布局中保持状态是完美的，但是当我有变量时我不想要不同的布局，例如包装componentBinding ..

如果有人分享如何解决这些问题的新想法，我会非常高兴。

Answer 1

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

如果我没有遗漏某些东西，在这种情况下合理的做法是在每个页面中包含布局。然后，您可以使用＆＃34;传统＆＃34;处理重复代码。使用淘汰模板的方法（特别是关于来自http://knockoutjs.com/documentation/template-binding.html的动态模板的注释5）和代码提取。

您可能想要采取的其他方法是将所有布局放在母版页中，然后使用＆＃34等绑定来控制它们。如果＆＃34;和＆＃34;可见＆＃34;。

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

1 个答案: