JSFiddle - React, Tailwind, and code Playground

by lelandrichardson

HTML

<div id="app">
    <div data-bind="text: label"></div>
    <foo></foo>
</div>


<div id="fooTemplate">
    <img data-bind="attr: { src: src }" />
</div>

JavaScript

var fooModel = {
    src: 'http://placekitten.com/200/300'
};

var parentModel = {
    label: 'this is parent model'
};

ko.bindingProvider.instance.preprocessNode = function (node){
    if (node.nodeType !== 1) {
        return;
    }
    var name = node.tagName.toLowerCase();
    if (name !== 'foo') {
        return;
    }
    
    var newNode = document.getElementById('fooTemplate').cloneNode(true),
        context = ko.contextFor(node),
        childContext = context.createChildContext(fooModel);
    
    node.parentNode.replaceChild(newNode, node);
    
    /* 
    i need to be able to switch the binding context here... similar to how a "with" binding would...
    however, there doesn't seem to be a way for me to indicate to knockout that these nodes are "taken care of" and instead knockout tries to bind them on it's own after this function returns.
    */
    ko.applyBindingsToDescendants(childContext, newNode);
    
    // although documentation seems to indicate that the value you return here should be an array of nodes, i don't see the return value being used anywhere?
    return;
};



ko.applyBindings(parentModel, document.getElementById('app'));