JSFiddle - React, Tailwind, and code Playground

by st3fan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div id="page">
  Snopp: <span data-bind="text: snopp"></span>

  <button data-bind="click: increase">Increase</button>
  <button data-bind="click: open">Open</button>

  <div id="dialog" class="modal">
    Snopp: <span data-bind="text: snopp"></span>
  </div>
</div>

CSS

.modal {
  border: 1px solid #000;
  padding: 10px;
  margin: auto;
  width: 50%;
  display: none;
}

JavaScript

var vm = function() {
	console.log('vm');
  var self = this;
  
  self.snopp = ko.observable(0);

	self.increase = function() {
    console.log('increase', self.snopp());
  	self.snopp(self.snopp() + 1);
  };
  
  self.open = function() {
  	console.log('open');
    $('#dialog').dialog({
    	Ok: function() { $(this).dialog('close'); }
    });
  };
};

$(function() {
  console.log('dom ready');
  ko.applyBindings(vm, $("#page")[0]);
});

/*ko.bindingHandlers.jqDialog = {
    init: function(element, valueAccessor) {
        var defaults = {
            modal: true,
	        autoOpen: false,
	        closeOnEscape: false
	    }
	    var options = $.extend(defaults,valueAccessor());
	    $(element).dialog(options);
    }
};*/