使用ko:if-binding敲除绑定提供程序预处理器

Knockout binding provider preprocessor with ko:if binding

本文关键字：程序 预处理 处理器 绑定 ko if-binding 使用      更新时间：2023-09-26

我一直在尝试使用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;
    }
}

演示Fiddle：https://jsfiddle.net/whelkaholism/wzqL64ga/

因此，文本绑定和点击绑定可以很好地工作，但如果我检查对象检查器和生成的if节点是否与硬编码的相同，那么只有硬编码的节点可以工作。

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

您刚刚忘记了一件事：

el.innerHTML = node.innerHTML;

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

相关文章：