JSFiddle - React, Tailwind, and code Playground

by Josh Wallace

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>
<div data-bind="customBinding: shouldBeBound"><p>Here is a great thing...</p></div>
<div id="component-container" data-bind="stopBinding: true">

JavaScript

window.onerror = function(message){
	alert(message);
}

requirejs.config({
    appDir: ".",
    baseUrl: "js",
    paths: { 
        "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery",
        "knockout": "//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug",
        "text": "//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text.min",
        "component-template": "/echo/js?js=%3Cp%20data-bind%3D%22text%3A%20message%22%3E%3C%2Fp%3E&delay=1"
    }
});

require(["knockout", "jquery"], function(ko, $){
  function CustomBindingController(element){
    var self = this,
    $element = $(element),
    $component;

    function init(){
      $component = $("<!-- ko component: { name: \"my-component\", params: $data } --><!-- /ko -->");

      $("#component-container").append($component);

      ko.applyBindings( { message: "Binding Applied!" }, $component[0]);

      self.destroy = destroy;
    }

    function destroy(){
      $component.remove();
    }

    init.call(self);
  }
  
  ko.bindingHandlers.customBinding = {
    update: function(element, valueAccessor){
      var $element = $(element)

      if(ko.unwrap(valueAccessor())){
        $element.data("controller", new CustomBindingController(element));
      } else {
        var controller = $element.data("controller");

        if(controller){
          controller.destroy();

          $element.removeData("controller");
        }
      }
    }
  }
  
	ko.bindingHandlers.stopBinding = {
    init: function() {
      return { controlsDescendantBindings: true };
    }
  };

  ko.components.register("my-component", {
    //template: "<p data-bind=\"text: message\"></p>"
    template: { require: "text!component-template" }
  });

  var vm = { shouldBeBound: ko.observable(true) };

  ko.applyBindings(vm);

  vm.shouldBeBound(false);
  
  return {};
});