javascript - 使用 knockoutjs 虚拟元素动态创建 html 部分

Question

我正在尝试使用带有 html 绑定(bind)的“虚拟元素”来动态创建 html 部分，但失败并显示消息:“绑定(bind)‘html’不能与虚拟元素一起使用”。这是 jsfiddle:http://jsfiddle.net/d3Dpp/ .

有人知道是否有任何解决方法吗？

Answer 1

基于Artem的代码和KnockoutJS 2.2.1，这是一个改进的版本:

http://jsfiddle.net/YZzDe/2/

改进:

1. 更少的代码，更少的重复(连接到暴露的接口(interface))
2. 覆盖“html”绑定(bind)，所以基本上旧的“html”现在可以在虚拟中使用
3. 不再有全局函数。

这是代码

{
    var overridden = ko.bindingHandlers['html'].update;

    ko.bindingHandlers['html'].update = function (element, valueAccessor) {
        if (element.nodeType === 8) {
            var html = ko.utils.unwrapObservable(valueAccessor());

            ko.virtualElements.emptyNode(element);
            if ((html !== null) && (html !== undefined)) {
                if (typeof html !== 'string') {
                    html = html.toString();
                }

                var parsedNodes = ko.utils.parseHtmlFragment(html);
                if (parsedNodes) {
                   var endCommentNode = element.nextSibling;
                   for (var i = 0, j = parsedNodes.length; i < j; i++)
                      endCommentNode.parentNode.insertBefore(parsedNodes[i], endCommentNode);
                }
            }
        } else { // plain node
            overridden(element, valueAccessor);
        }
    };
}
ko.virtualElements.allowedBindings['html'] = true;