0

我正在开发一个使用 knockout.js 作为客户端 js 库的 MVC3 应用程序。我们有一个复杂的屏幕，其中包含类似列表的控件和网格，这些控件和网格通过 javascript 使用 knockout.js 填充数据。我的问题是，当所有控件都完全绑定时，我不知道如何拦截事件，即准备好供最终用户使用。目前，页面在 7 秒内加载到浏览器中，但控件需要大约 20-30 秒才能绑定到数据，这使得页面在一切准备就绪之前无法使用。有什么方法可以知道所有控件何时完全绑定？提前致谢。

4

1 回答 1

0

只要您的视图模型或自定义绑定器中没有任何异步逻辑，那么您可以直接在后面添加一行代码applyBindings：

ko.applyBindings(myViewModel);   
doSomethingElse();

这是一个使用长时间运行的活页夹的小提琴，它演示了这一点（一定要打开控制台查看输出）：http: //jsfiddle.net/tlarson/bPaCb/

但是，如果您确实有异步逻辑（例如使用 ajax 调用 Web 服务），那么您将需要在所有操作完成后使用回调来运行代码。这是我通常做的是：

  1. 使用布尔可观察对象设置我的视图模型，指示数据尚未加载：self.isLoaded = ko.observable(false);
  2. 添加当 observable 为 false 时可见的“等待”指示器（微调器等）：<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。这将隐藏微调器并显示您的数据。
于 2013-05-10T14:44:49.807 回答