当所有嵌套组件都被渲染时,KnockoutJS afterRender回调？

Question

我有一个使用3.2.0的嵌套KnockoutJS组件的层次结构.它工作得很好但是我希望在加载和渲染整个组件层次结构后执行一些代码.它与afterRender()完全相同,与afterRender相同的常见用例需要.

到目前为止,我尝试了一些方法,但没有运气:

1. 将以下内容添加到根模板中,但在嵌套组件加载之前调用它,所以太早了. <!--ko template: {afterRender: onLoad.bind($data)} -->
2. 使用最新的3.3.0-alpha并在所有组件上指定synchronous:true.但我相信,因为我使用AMD,组件仍然是异步"加载",这意味着只是因为我的root applyBindings()返回,并不意味着所有组件都已加载和呈现.
3. 甚至尝试构建一个延迟对象集合,只有在加载相应的组件时才能解析它们.这变得过于复杂,但由于我不会进入的原因仍然无法工作.

有没有办法在一个完整的knockoutjs组件层次结构被加载和渲染后调用回调？谢谢!

我刚刚遇到这两个线程,所以似乎其他人也在寻找这个.与现有解决方法的关键区别在于它们不适用于嵌套组件.

• https://github.com/knockout/knockout/issues/1533
• https://github.com/knockout/knockout/issues/1475

Answer 1

如果您使用 ko.components 这可能有用：

1）创建一个延迟对象来跟踪每个组件的加载

var statusX = $.Deferred()
var statusY = $.Deferred()

2）通知knockout告诉你组件何时加载并准备好

ko.components.get('x-component', statusX.resolve) //Note: not calling resolve, but passing the function
ko.components.get('y-component', statusY.resolve)

3) 同步两个状态延迟

$.when(statusX.promise(), statusY.promise())
 .done( function allComponentsLoaded(componentX, componentY){ 
            //Both components are ready here 
            //Note the arguments from the function comes via
            //ko->jquery deferred resolve
           });