使用Knockout.js准备好jQuery文档

Question

我刚刚扔进一把umbraco ASP.NET CMS对我的最新项目,我不知道这是怎么了一刀切,但我的设置Knockout.js做了所有的模板.

我不是太热衷于knockout.js但是到目前为止它一直很简单,除了当我开始添加一些jQuery的东西时,我遇到的问题是jQuery在敲除之前已经完成了填充页面的所有元素.

到目前为止,唯一对我有用的解决方案是我的所有jQuery内容都包含在setTimeout()函数中,这显然是不行的.

使jQuery和Knockout协同工作的最有效方法是什么,所以jQuery在敲除之前不会完成？

Answer 1

我最近在jSignature插件和我的Knockout视图上遇到了相同的问题。在调用jSignature之前，我需要KO视图已完全呈现，否则它的大小无法正确调整。

我使用模板绑定和afterRender回调函数来修复它，以调用jQuery工作。

这是KO文档：

http://knockoutjs.com/documentation/template-binding.html

这是一个快速的jsfiddle，显示了如何使用它：

http://jsfiddle.net/PCbFZ/

诀窍在于，您可以使用模板绑定的afterRender回调，而无需实际使用模板本身。相反，您将所有现有的HTML包装在div中，该div将调用afterRender回调：

<div data-bind="template: {afterRender: initApp}">
  <!-- your existing HTML here -->
</div>

initApp是执行jQuery工作的函数。

我认为通常应该执行所需的操作，尽管如果HTML特别复杂，或者需要在一个页面内呈现许多视图，则可能需要做更多的工作。让我知道您的情况-如果这样做不能像我的问题那样轻松解决您的问题，也许我可以尝试提供更多帮助！

更新-以下来自JACL的评论-这是小提琴的扩展版本，显示了该技术也可与ko-if一起使用。每次使用复选框显示/隐藏“小部件”时，都会应用不同的随机颜色来指示afterRender函数正在执行其工作。

http://jsfiddle.net/PCbFZ/15/

Answer 2

也许 window.load 而不是 document.ready 可以解决问题