JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

<script src="https://www.gstatic.com/firebasejs/3.5.1/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyCm577yx4uU0TW5g_uFQH3wg_fUjAHUp88",
    authDomain: "flowerpower-c349a.firebaseapp.com",
    databaseURL: "https://flowerpower-c349a.firebaseio.com",
    storageBucket: "flowerpower-c349a.appspot.com",
    messagingSenderId: "29712322543"
  };
  firebase.initializeApp(config);
</script>


<span data-bind="text: ko.toJSON(activeFilter)"></span>


<span data-bind="foreach: {data: filter, as: 'filterCategories'}">
  <span data-bind="foreach: {data: Object.keys(filterCategories), as: 'category'}">
    <h2 data-bind="text: category + ':'"></h2>
      
      <!-- <h4 data-bind="text: ko.toJSON(filterCategories[category])"></h4> -->

      <span data-bind="foreach: {data: filterCategories[category], as: 'attributes'}">
        <span data-bind="foreach: {data: Object.keys(attributes), as: 'attribute'}">
          
          <input type="checkbox" data-bind="check: $data, value: $root.activeFilter">
          <span data-bind="text: $data + ': (' + attributes[attribute] + ')'"></span>
          <br>
        
        </span>
      </span>
  
  </span>
</span>

JavaScript

ko.bindingHandlers.check = {
    init: function(element, valueAccessor) {
        //var value = ko.unwrap(valueAccessor()); // Get the current value of the current property we're bound to
        //$(element).toggle(value); // jQuery will hide/show the element depending on whether "value" or true or false
    },
    update: function(element, valueAccessor, allBindings) {
        // Leave as before
        debugger;
        allBindings().value()['test'] = "test";
        return 
    }
};



function VM() {
var self = this;

		self.filter = ko.observable();
  	self.activeFilter = ko.observable({});

	 	var ref = firebase.database().ref("florists");
  	var filter = {};
    var activeFilter = {};
    
    ref.once("value").then(function(florists){
        florists.forEach(function(florist){
          if (florist.val().products) {
            var flowers = florist.val().products;

            for (var flower in flowers) {
              var currentFlower = flowers[flower];

              for (var attribute in currentFlower.attributes) {
                  var currentAttribute = currentFlower.attributes[attribute];

                  for (var value in currentAttribute) {

                    if (!filter[attribute])
                    {
                      filter[attribute] = {};
                      //activeFilter[attribute] = {};
                    }
                    if (!filter[attribute][value])
                    {
                      filter[attribute][value] = 1;
                      //activeFilter[attribute][value] = "";
                    }
                    else 
                    {
                      filter[attribute][value] += 1;
                    }
                  }
              }
            }
          }
        });
      //console.log(filter);
      self.filter(filter);
      //self.activeFilter(activeFilter);
    });

}


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