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（仅适用于模板绑定？），自定义绑定也没有帮助，因为不保证在DOM之后调用“update”事件已更新。

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

afterRender用于html绑定

1 个答案: