使用knockoutjs虚拟元素在运行时创建html部分

Question

我试图使用"虚拟元素"结合html绑定来动态创建html部分，但是出现了以下错误信息："The binding 'html' cannot be used with virtual elements"。这是jsfiddle链接：http://jsfiddle.net/d3Dpp/。

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

- Gelin Luo

---

你是说你想使用模板化的HTML来替换DOM中的一个节点，而当前的with和template绑定不起作用，因为它们只会替换它们的子元素而不是自身？ - ericb

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;

- Martijn

---

这解决了我在尝试在 knockout 模板中显示 HTML 字段的问题。谢谢。 - FuZZbaLL

Answer 2

经过一些使用knockout的尝试，我发现这是可能的。

这里有一个工作示例

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

不幸的是，这需要复制一些内部的knockout功能。

更新

KnockoutJS 2.2.1增加了虚拟元素绑定到导出中，因此即使在精简版本中也可以使用：

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

这意味着更好的HTML绑定解决方案是可能的 - 参见 Martijn的回答。

- Artem

---

很酷，这正是我想要的。 - Gelin Luo

我只是好奇想知道html和vhtml绑定是否可以递归地应用ko绑定，但我发现它不行：http://jsfiddle.net/d3Dpp/2/。 - Gelin Luo

FYI，KnockoutJS 2.2.1 允许消除大部分重复。请查看我的答案，其中包含代码和演示。 - Martijn

Answer 3

你也可以将此作为你的视图：

<div data-bind="html: html"></div>​​​​​​​​​​​​​​​​​​​​​

这将用您提供的HTML属性替换div“container”的innerHtml。

- John Earles

---

我知道如何使用HTML绑定现有元素。我的问题是，我想要动态创建元素本身。也就是说，我不想为div或其他元素绑定内部HTML内容，而是希望将HTML内容放置在指定位置。 - Gelin Luo