javascript - How to intercept the event when all controls are completely bound to data? -

i'm working on mvc3 application uses knockout.js client side js library. have complex screen list-like controls , grids populated data javascript using knockout.js. problem don't know how intercept event when controls bound, i.e. ready used end user. currently, page loads in browser in 7 seconds takes around 20-30 seconds controls bound data makes page unusable until ready. there way know when controls bound ? in advance.

as long don't have asynchronous logic in viewmodels or custom binders, can put line of code directly after applybindings:

ko.applybindings(myviewmodel);    dosomethingelse(); 

here fiddle long-running binder demonstrates (be sure open console see output): http://jsfiddle.net/tlarson/bpacb/

however, if have asynchronous logic (such calling web service ajax), you'll need use callbacks run code after done. here typically is:

1. set view model boolean observable indicating data not yet loaded: self.isloaded = ko.observable(false);
2. add 'waiting' indicator (spinner, etc.) visible when observable false: <div data-bind=visible:!isloaded()"><img src="spinner.gif"></img></div>
3. similarly, hide views until isloaded true: <div data-bind="visible:isloaded">data views go here</div>
4. call applybindings(myviewmodel); of bindings set up. should not include ajax calls yet - data should empty.
5. make ajax call load data. when data comes back, update appropriate data properties on viewmodel, set isloaded true. hide spinner , show data.