JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<script src="https://github.com/quirkey/sammy/raw/master/lib/sammy.js"></script>
<input type="checkbox" value="1" data-bind="checked:sizeOptions" /> Size 1
   <br />
<input type="checkbox" value="2" data-bind="checked:sizeOptions" /> Size 2
   <br />

<br />

<div data-bind="text: ko.toJSON($root.sizeOptions)"></div>
Calls: <div data-bind="text: $root.calls"></div>

JavaScript

function SearchModel() {
     var self = this;
     self.calls= ko.observable(0);
     self.sizeOptions = ko.observableArray([]);

     // Should this be a Behaviour? (like click: goToFolder). This would be called on the Sammy rout also

     self.sizeOptions.subscribe(function () {
         var _calls = self.calls();
         _calls = _calls + 1;
         self.calls(_calls);
         location.hash = "o=" + self.sizeOptions().join();
         console.log("subscribe");
     });

     Sammy(function() {
         this.get('#o=:o', function() {
            self.sizeOptions(this.params.o.split(','));
            console.log("Sammy get");
            // do an AJAX request and place the results in an observableArray
         });

    }).run(); 
}
ko.applyBindings(new SearchModel());