JSFiddle - React, Tailwind, and code Playground

by straeger

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<div id="outer">
    
    <input type="text" data-bind="value: inputtext"/>
    <h5 data-bind="text: inputtext"></h5>
    
<!-- ko stopBinding: true -->    
    <div id="inner">
    <!-- ko foreach: elements -->
    <button class="badge" data-bind="text: elementText, click: $root.clickhandler"></button> 
    <!-- /ko -->
    </div>
<!-- /ko -->    
    
</div>

JavaScript

var addCustomHandler = function(){
    ko.bindingHandlers.stopBinding = {
        init: function () {
            return { controlsDescendantBindings: true };
        }
    };
    ko.virtualElements.allowedBindings.stopBinding = true;
};

var viewModel = {
    inputtext: ko.observable('lorem ipsum foo 123'),
    elements: [{
        elementText: 'ipsum 1',
        value: 1
    },{
        elementText: 'ipsum 2',
        value: 2
    },{
        elementText: 'ipsum 3',
        value: 3
    },{
        elementText: 'ipsum 4',
        value: 4
    }],
    clickhandler: function(data){
        alert(data.value);
    }
};


$(function() {
    addCustomHandler();
    ko.applyBindings(viewModel, $('#outer')[0]);
    ko.applyBindings(viewModel, $('#inner')[0]);
    
    //ko.cleanNode($('#outer')[0]);
});