javascript - 使用 ko :if binding knockout 绑定(bind)提供程序预处理器

Question

我一直在尝试使用 Knockout 的 bindingProvider API 来绑定(bind)自定义元素，这实际上只是一个实验，看看是否可以使模板更具可读性。

我的处理器总体上工作正常，至少对于大多数绑定(bind)来说是这样，但对于 if 绑定(bind)来说，它不起作用。

标记是:

<k-o text="Text" click="clickHandler"></k-o>

<k-o if="IsShowing"><!-- Doesn't work -->
  <p>
    Hello 1!
  </p>
</k-o>

<span data-bind="if: IsShowing"><!-- Works -->
  <p>
    Hello 2!
  </p>
</span>

代码是:

ko.bindingProvider.instance.preprocessNode = function(node) 
{
    if (node.nodeName == 'K-O') 
    {
        var el = document.createElement('span');      
        var att = document.createAttribute('data-bind');

      var attvals = [];

      for(var i = 0; i < node.attributes.length; i++)
        attvals.push(node.attributes[i].name + ': ' + node.attributes[i].value);

      att.value = attvals.join(', ');
        el.setAttributeNode(att);

      node.parentNode.replaceChild(el, node);

      return el;
    }
}

演示 fiddle :https://jsfiddle.net/whelkaholism/wzqL64ga/

因此，文本绑定(bind)和单击绑定(bind)工作正常，但尽管如果我检查对象检查器和 if 生成的节点与硬编码的节点相同，但只有硬编码的节点有效。

(此用例用于后端数据库访问应用程序，使开发中的功能模板更加清晰。任何 SEO 或自定义元素的相关问题都不相关)

Answer 1

你刚刚忘记了一件事:

el.innerHTML = node.innerHTML;

https://jsfiddle.net/wzqL64ga/8/