Question

我一直在使用Knockout的bindingProvider API绑定自定义元素，就像实验一样，并且看看我是否可以让模板更具可读性。

我的处理器一般工作正常，至少对于大多数绑定而言，但对于if绑定，它不起作用。

标记是：

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

演示小提琴：https://jsfiddle.net/whelkaholism/wzqL64ga/

因此文本绑定和单击绑定工作正常，但是如果我检查对象检查器并且生成的节点与硬编码的节点相同，则只有硬编码的节点有效。

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

Answer 1

你刚忘记了一件事：

el.innerHTML = node.innerHTML;

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

Knockout绑定提供程序预处理器与ko：if绑定

1 个答案: