KO bootstrap popover

by Retsam19

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div>
  <button id="popover-trigger">
    Popover
  </button>
</div>
<div>
  Counter: <span data-bind="text: popover.counter"></span>
</div>
<div>
  <button data-bind="click: popover.incr">
  Increment
  </button>
</div>
<script type="text/html" id="popover-header">
  Counter: <span data-bind="text: counter"></span> <a data-bind="click: reset">X</a>
</script>
<script type="text/html" id="popover-content">
    <button data-bind="click: incr">Increment</button>
</script>

Babel + JSX

const buttonEl = document.getElementById("popover-trigger");

var counter = ko.observable(0);

ko.options = ko.options || {};
ko.options.useOnlyNativeEvents = true;

ko.applyBindings({
	root: true,
  popover: {
  	root: false,
    counter: counter,
    incr: function () {
			counter(counter() + 1);
		},
    reset: function () {
      counter(0);
    }
  }
});

const bindingContext = ko.contextFor(document.body);

const HEADER_HTML = document.getElementById("popover-header").innerHTML;
const CONTENT_HTML = document.getElementById("popover-content").innerHTML;

const header = $("<div>")
	.append(HEADER_HTML)
  .get(0);
const content = $("<div>")
	.append(CONTENT_HTML)
  .get(0);
  
const childContext = bindingContext.createChildContext(
   bindingContext.$data.popover
);

ko.applyBindingsToDescendants(childContext, header);
ko.applyBindingsToDescendants(childContext, content);

$(buttonEl).popover({
	title: header,
  content: content,
  html: true
});