javascript - 渲染完所有嵌套组件后，KnockoutJS afterRender 回调？

Question

我有一个使用 3.2.0 的嵌套 KnockoutJS 组件的层次结构。它工作得很好，但我希望在我的整个组件层次结构加载和呈现后执行一些代码。它大致相当于 afterRender()，需要用于与 afterRender 相同的常见用例。

我已经尝试了一些方法，但到目前为止没有成功:

1. 将以下内容添加到根模板，但它在嵌套组件加载之前被调用，太早了。
<!--ko template: {afterRender: onLoad.bind($data)} -->

2. 使用最新的 3.3.0-alpha 并在所有组件上指定 synchronous:true。但我相信，由于我使用的是 AMD，组件仍然是异步“加载”的，这意味着仅仅因为我的根 applyBindings() 返回，并不意味着所有组件都已加载和呈现。
3. 甚至尝试构建延迟对象的集合，这些对象只有在加载相应组件时才会解析。这变得过于复杂，并且由于我不会讨论的原因仍然无法正常工作。

有没有办法在加载和呈现完整的 knockoutjs 组件层次结构后调用回调？谢谢!

我刚刚遇到这两个线程，所以看起来其他人也在寻找这个。与现有解决方法的主要区别是它们不适用于嵌套组件。

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

Answer 1

我编写了一个 knockout 库，当所有组件都已加载和绑定(bind)时会触发一个事件。它使用引用计数，类似于用于垃圾收集的引用计数。我在我的项目中广泛使用组件，包括嵌套多个层次，我无法在不知道什么时候一切都“准备就绪”的情况下生活。我没有花太多时间在使用文档上，但基础知识就在那里。

Git 中心维基百科: https://github.com/ericraider33/ko.component.loader/wiki

fiddle : https://jsfiddle.net/ericeschenbach/487hp5zf/embedded/result/

使用 HTML:

<div id="ko-div">
  Status: <span data-bind="text: loading() ? 'Loading' : 'Done'"></span>
  <br><br>
  <test-panel></test-panel>
</div>

使用 JS:

var pageModel = { 
  loading: ko.observable(true), 
    completedCallback: function (childRef) { 
    pageModel.loading(false); 
    childRef.testValue(childRef.testValue()+1);  
  }
};

var tpRef = ko.componentLoader.ref.child({ completedCallback: pageModel.completedCallback});
var tpModel = { 
  attached: function(element) { return tpRef; },
  testValue: ko.observable(5)
};

ko.components.register('test-panel', {
    viewModel: function() { return tpModel; },
    template: '<div data-bind="attached: true">Test Panel<br>From Code <span data-bind="text: testValue"></span></div>'
});


ko.componentLoader.setOptions({ verbose: true });
ko.applyBindings(pageModel, $('#ko-div')[0]);