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

Question

我正在尝试使用带有html绑定的"虚拟元素"来动态创建html部分,但失败并显示消息:"绑定'html'不能与虚拟元素一起使用".这是jsfiddle:http://jsfiddle.net/d3Dpp/.

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

Answer 1

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

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

改进:

1. 更少的代码,更少的重复(挂钩到暴露的接口)
2. 覆盖'html'绑定,所以基本上现在可以在虚拟中使用旧的'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;

Answer 2

好吧,经过一些玩淘汰赛,我发现它是可能的.

工作范例就在这里

http://jsfiddle.net/d3Dpp/42/

不幸的是,这需要重复一些内部淘汰功能

UPDATE

KnockoutJS 2.2.1添加了绑定到导出的虚拟元素,因此即使在缩小版本中也可用:

ko.exportSymbol('virtualElements.allowedBindings', ko.virtualElements.allowedBindings);

这意味着可以为html绑定提供更好的解决方案 - 请参阅Martijn的回答.