JSFiddle - React, Tailwind, and code Playground

by KANDR101

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">


<div id="main">
    <p>Main viewmodel:</p>
    <pre data-bind="text: JSON.stringify(ko.toJS($data), null, 4)"></pre>
   
    <hr />
    
    <!-- ko subBinding: arr -->
    <!-- /ko -->
</div>

<script type="txt/html" id="toolbar-template">

        <button data-bind="disable: $parent.loading(),
            click: function(){ $parent[click](value) },
            visible: !$data.action|| ( $data.name() === $parent[ $data.target() ]() ),
            attr:{ class: 'btn bg-white mr-2' } ">
            <i data-bind="attr: icon "></i>
        </button>

</script>

JavaScript

ko.virtualElements.allowedBindings.subBinding = true;
ko.bindingHandlers.subBinding = {
  init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    var actualValue = valueAccessor();

    ko.virtualElements.emptyNode(element);

    var subViewModel = {};
    subViewModel = 
      new ko.observable( ko.utils.unwrapObservable(actualValue) );

    var childBindingContext = bindingContext.createChildContext(subViewModel);
    //ko.utils.extend(childBindingContext, subViewModel);

    var getDomNodesFromHtml = function(html) {
      var div = document.createElement('div');
      div.innerHTML = html;
      var elements = div.childNodes;
      var arr = [];
      for(var i = 0; i < elements.length; i++) {
        arr.push(elements[i]);
      }
      return arr;
    };
    function loopForeachElements(el,div, repeat){
      var arr = [];
      for(var i = 0; i < repeat; i++) {
        var cloned = el.clone();
        div.append( cloned )
        arr.push( cloned );
      }
      return arr;
    }
    /*     var btnhtml = ('<button class="btn bg-white mr-2" data-bindx="disable: $parent.loading(), click: function(){$parent[click](value)} ">' +
                   '     <i data-bind="attr: icon"></i>' +
                   '</button>').repeat( subViewModel.subValue().length ); */

/*     var btnhtml = loopForeachElements( 
      document.getElementById("toolbar-template"), 
      document.createElement('div'),
      subViewModel.subValue().length
    ); */
    var btnhtml = (document.getElementById("toolbar-template").innerHTML).repeat(subViewModel().length);
    /*         var html = '<p data-bind="text: subValue"></p>' +
            'data: <pre data-bind="text: JSON.stringify(ko.toJS($data), null, 4)"></pre>' + 
            'parent: <pre data-bind="text: JSON.stringify(ko.toJS($parent), null, 4)"></pre>' +
            'root through parentcontext: <pre data-bind="text: JSON.stringify(ko.toJS($parentContext.$root), null, 4)"></pre>' +
     ...