2014-08-30 31 views
0

我正在用knockout.js构建SPA应用程序。 基本上,我所做的就是根据路由将当前页面绑定为ko组件。 它看起来像Knockout SPA:不同的布局(主页)

<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> 

因此,基本上在第一布局不是当前页模块的直接父节点,但是第二是..

动态布局改变,我能想到的变体

  1. 指定在每个页面的布局组件。但我不认为这是个好主意,因为我会一遍又一遍地编写相同的代码并且将无法在布局组件中保留状态,因为当我更改下一页时,布局将被重新创建(不完全但足以松开状态)

  2. 布局与currentPage组件分开,所以只有当前组件的绑定将被改变..这是完美的持久状态的布局,但不好当我有VAR NT,我想例如不同的布局是绕componentBinding包装..

,我会非常高兴,如果有人股新鲜的想法如何解决此类问题。

回答

0

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

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

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

+0

我无法在每个页面中定义布局,因为我需要保持状态。为了更加清晰,我已更新了我的问题 – 2014-08-31 07:44:53