Binding Providers test

by whelkaholism

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<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>

JavaScript

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);
        el.innerHTML = node.innerHTML;
      
      node.parentNode.replaceChild(el, node);
      
      return [el];
    }
}

function Model(data, mapping)
{
    var _this = this;
    var _mapping = $.extend({}, {}, mapping);
    
    this.Text = ko.observable('Hello world');    
    this.IsShowing = ko.observable(false);
    
    this.clickHandler = function() { _this.IsShowing(!_this.IsShowing()); };
    
    if(data)
        ko.mapping.fromJS(data, _mapping, _this);
}

var model = new Model();
ko.applyBindings(model);