如何在所有控件完全綁定到數據時攔截事件？

Question

我的工作，它使用knockout.js作爲客戶端JS庫的MVC3應用。我們有一個複雜的屏幕，上面有類似列表的控件和網格，這些網格通過javascript使用knockout.js填充數據。我的問題是，我不知道如何在所有控件完全綁定時攔截事件，即準備好供最終用戶使用。目前，該頁面在7秒內加載到瀏覽器中，但控件需要約20-30秒才能綁定到數據，這使得頁面無法使用，直到所有內容都準備就緒。有什麼方法可以知道所有控件何時完全綁定？提前致謝。

Answer 1

只要你沒有在你的ViewModels或自定義的粘合劑的任何異步邏輯，那麼你可以把一行代碼applyBindings後直接：

ko.applyBindings(myViewModel); 
doSomethingElse(); 

這裏是一個長期提琴（確保打開控制檯查看輸出）：http://jsfiddle.net/tlarson/bPaCb/

但是，如果您確實有異步邏輯（例如使用ajax調用Web服務），那麼您需要使用回調在完成所有事情後運行代碼。以下是我通常做的是：

1. 設置我的視圖模型用布爾觀察到的指示數據尚未加載：self.isLoaded = ko.observable(false);
2. 添加一個「等待」指示燈（微調等）是可見當觀察到的是假的：<div data-bind=visible:!isLoaded()"><img src="spinner.gif"></img></div>
3. 同樣，隱藏的意見，直到isLoaded是真實的：<div data-bind="visible:isLoaded">Data views go here</div>
4. 呼叫applyBindings(myViewModel);把所有設置的綁定。這應該不包括任何Ajax調用 - 數據應該是空的。
5. 發出Ajax調用來加載數據。當數據返回時，更新視圖模型上的相應數據屬性，集合isLoaded爲true。這會隱藏微調器並顯示數據。