javascript - 用于 html 绑定的 afterRender

Question

在 Knockout 将 html 添加到 DOM 并完成渲染后，有没有办法运行自定义代码？我需要这个，所以我可以将嵌套视图模型绑定到动态添加的 html 代码。

就像是：

<div data-bind="html: dynamicHtml, afterRender: customCode"></div>

...

MyViewModel.prototype.customCode = function(){
    ko.applyBindings(self.MyInnerViewModel(), document.getElementById('someTagInTheDynamicHtml'));
};

afterRender此处不调用（仅适用于模板绑定？），自定义绑定也无济于事，因为update不能保证在 DOM 更新后调用“”事件。

Answer 1

是的，仅afterRender适用于template绑定。

但是您可以创建自定义绑定处理程序来跟踪html绑定更改并在值更新时触发回调。我的例子：

ko.bindingHandlers.afterHtmlRender = {
    update: function(el, va, ab){
        ab().html && va()(ab().html);
    }
}

缩短的参数名称： va - valueAccessor， ab - allBindings。

标记也应如下所示（绑定名称已更改）：

<div data-bind="html: dynamicHtml, afterHtmlRender: customCode"></div>

http://jsfiddle.net/dDDjf/

更新

带有解释的简化绑定代码：

ko.bindingHandlers.afterHtmlRender = {
    update: function(element, valueAccessor, allBindings){
        // check if element has 'html' binding
        if (!allBindings().html) return;
        // get bound callback (don't care about context, it's ready-to-use ref to function)
        var callback = valueAccessor();
        // fire callback with new value of an observable bound via 'html' binding
        callback(allBindings().html);
    }
}