JSFiddle - React, Tailwind, and code Playground

by MikeEast

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>
<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>

JavaScript

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);