JSFiddle - React, Tailwind, and code Playground

by MikeEast

HTML

<div class="btn-group"> 
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Facets
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- ko foreach: facets -->
    <li>
      <input type="checkbox" data-bind="checked: Visible, click: Show, clickBubble: false"
      /> <span data-bind="text: DisplayName"></span>

    </li>
    <!-- /ko -->
  </ul>
</div>

var data = {
  "Facets":[
    { "Name":"Facet1", "Hits": [
		{"Name":"apple", "Selected":true, "HitCount":4},
		{"Name":"banana", "Selected":false, "HitCount":5}
	]},
	{ "Name":"Facet2", "Hits": [
		{"Name":"horse", "Selected":false, "HitCount":5},
		{"Name":"monkey", "Selected":false, "HitCount":7}
	]}
}

var Model = function() {
  var self = this;
  self.facets = ko.parseJson(data);
}

var vm = new Model();
ko.applyBindings(vm);