javascript - afterRender 用于 html 绑定(bind)

Question

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

类似于:

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

...

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

afterRender 未在此处调用(仅适用于模板绑定(bind)？)，自定义绑定(bind)也无济于事，因为无法保证“update”事件在 DOM 更新后调用。

Answer 1

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

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

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

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

标记也应该像这样(绑定(bind)名称已更改):

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

http://jsfiddle.net/dDDjf/

更新

带有解释的简化绑定(bind)代码:

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);
    }
}