迪朗達爾視圖合成爲了

我有觀點，有一些，我只用分手HTML到單獨的文件子視圖。

index.html(index.js) 
    - menu.html 
    - header.html 
    - footer.html

菜單視圖在加載後由索引視圖填充。

中的index.html裏面我撰寫這樣的菜單視圖（沒有模塊menu.js，這裏只是HTML組成）：

<!--ko compose: { view: 'menu'}--><!--/ko-->

問題是視圖合成的順序。

我在index.js中連接了一個附加事件，然後調用一個函數來填充位於menu.html中的菜單div。

但是，附加的視圖事件在之前被稱爲menu.html視圖已被組合。

事件看起來與控制檯是這樣的：

Binding views/footer Binding views/index binding complete: <section data-view="views/index" style="display: none;">…</section> [Index] Main View Attached Binding views/header Binding views/menu Binding views/menudropdown

因此，主視圖孩子之前連接。

有沒有辦法改變構圖順序，或等待所有的子視圖在主視圖連接/完成之前合成/加載？

感謝

來源

2014-03-06 John Lucas

您是否遇到您希望解決的問題？構圖的順序實際上是否造成問題？看起來合乎邏輯的是，你的父視圖應該首先加載，然後再加載孩子。 – 2014-03-06 14:40:29

看起來你可以推遲發射激活完成，使附加的事件等待着火，但它只是改變事件發射的時間，而不是命令。 –

Eric - 是的，我需要在子視圖中加載DOM，以便我可以初始化菜單（kendo treeview）。 –

簡短的回答是「不」 - 你不能改變構圖秩序。

較長的回答：也許我誤解了，但是您的視圖模型中填充菜單div聽起來有點可疑。你可以使用自定義綁定來做到這一點？如果你可以做綁定，那麼你可以看看使用Delayed Binding Handler。從文檔：

有時候你的綁定處理程序需要用它連接到DOM只有後當視圖的全部組成的完整的元件的作用。這方面的一個例子是任何需要測量HTML元素大小的代碼。 Durandal提供了一種方法來註冊一個挖空裝訂處理程序，以便在作文完成之前不會執行。爲此，請使用 composition.addBindingHandler。

另外，如果你很高興與任何代碼是在您的視圖模型運行時，你可能想使用compositionComplete事件，而不是attached事件。從內存中，attached事件從父項運行到子項（這就是在菜單組合完成之前正在索引上調用事件的原因）。相比之下，compositionComplete bubbles from child to parent：

最後，當組成整個過程完成，包括任何父母和孩子組成，構成引擎將調用的compositionComplete(view, parent)回調，從孩子浮上父。

您可以以同樣的方式對您的視圖模型附上compositionComplete處理器作爲激活方法：

// Secured Shell 
define([], function() { 
    var viewModel = { 
     activate: function() { 
      // do stuff 
     }, 

     compositionComplete: function (parent, child, settings) { 
      // do more stuff 
      debugger; 
     } 
    }; 

    return viewModel; 
});

希望有所幫助。

來源

2014-03-07 09:14:26 gerrod

感謝gerrod，compositionComplete是關鍵，當所有東西都組成時就會觸發，所以我的菜單div可用，我可以調用它的intialisation。我知道這不是理想的，但現在我只想分開HTML，這是有效的。後來我會重構一個更好的設計。再次感謝。 –

迪朗達爾視圖合成爲了

回答

相關問題