2014-08-30 49 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