ko.applyBindings上是否有某种回调可用?

con*_*exo 5 knockout.js

在我们当前的项目中使用,我们已经多次来到这一点.

如何在Knockout应用页面上的所有绑定才能确保执行某些Javascript代码?

在我的特定用例中,我使用if-bindings来评估一些配置选项,并决定是否应该渲染内部元素(=在DOM中).只有在if评估了这些绑定之后,我才需要计算某个元素中DOM节点的数量.显然,如果我太早计算 - if-dingdings还没有删除那些不需要的DOM节点,那么计数就会产生错误的结果.

Dan*_*ndy 7

ko.applyBindings()是一个同步调用,所以下一个语句应该只在它完成后执行.如果您有淘汰组件,可以同步或异步加载它们.所以,例如

var vm = new ViewModel();
ko.applybindings(vm);
//
CountRenderedElements();
Run Code Online (Sandbox Code Playgroud)

应该给你正确的结果.


TSV*_*TSV 4

也许这会有帮助。您可以使用模板绑定包装您的绑定(并将任何其他绑定放入模板内)并传递“afterRender”处理程序。该处理程序将在内容呈现后被调用。我已经美化了上面提到的jsfiddle(在评论中):

var model = {
  afterRenderCallback: function() {
    // this method will be called after content rendered
    var divContent = document.getElementById("textdiv").innerHTML;
    alert(divContent);
  },
  txt: ko.observable("this text will be substituted in the div")
};

ko.applyBindings(model);
Run Code Online (Sandbox Code Playgroud)
.content {
    border: 1px solid red;
}
Run Code Online (Sandbox Code Playgroud)
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<script type="text/html" id="wrappingTemplate">
<div id="textdiv" class="content" data-bind="text: txt"></div>
</script>

<!-- ko template: { name: 'wrappingTemplate', afterRender: afterRenderCallback } -->
<!-- /ko-->
Run Code Online (Sandbox Code Playgroud)