爲模態的內容編程注入模板

Question

我有一個主ViewModel和我的看法，這是偉大的，我有一個模式窗口（fancybox）與一些相當複雜的流程（因爲你將通過該模型中的3個步驟）。

現在我已經創建了一個新的ViewModel，而不是污染主要ViewModel與它的擔憂。所以我們分別稱它們爲MainViewModel，ModalViewModel。

我原本打算通過一些模板將模態視圖注入到主視圖中，然後讓fancybox將它們作爲內容。然而，這種方式我會有重複的DOM元素，這可能是危險的，因爲那裏可能會有重複的元素ID等

所以我想也許我應該試着找到一種方法來使用ajax注入模板到fancybox窗口。

只是爲了總結的流程：

1. 用戶輸入主視圖
2. 用戶點擊鏈接，其派生模式窗口
3. 用戶填寫表格中的模態
4. 用戶模態
5. 點擊提交用戶輸入第二階段的模態形式
6. 用戶填寫表格2的模態
7. 用戶提交表單
8. 用戶發送到新的頁面

所以我要對這個正確的方式？或者我應該在MainViewModel中包含ModalViewModel作爲子ViewModel並以這種方式處理它？

Answer 1

由於您可以控制命名模板的id，爲什麼不重命名模板id是唯一的。

並儘可能結合ModalViewModel你可以有這樣的視圖模型：

var MainViewModel = { 
    //other props 
    Modal : new ModalViewModel() 
}; 

，然後applybindings到childViewModel 像這樣：

ko.applyBindings(MainViewModel.Modal); 

如果整個模式視圖ISN只是一個模板，然後使用過載：

ko.applyBindings(MainViewModel.Modal,modalRootElement); 

Answer 2

您應該將模型包含爲主視圖模型的子模型。

KO的範例是有一個視圖模型/頁面。

如果您在fancybox中使用iframe，那麼兩種視圖模型會更有意義（但這會在兩個視圖模型中同步數據方面增加其自身的複雜性）。