JSFiddle - React, Tailwind, and code Playground

by whelkaholism

HTML

<label><input type="checkbox" data-bind="checked: ShowOdd"/> Odd</label><br/>
<label><input type="checkbox" data-bind="checked: ShowEven"/> Even</label><br/>
<ul>
  <!-- 
    NOTE you MUST generate the property name (odd in this case) with the double quotes 
    or it will not be valid JSON
  -->
  <li data-model='{"odd":true}' data-bind="visible: isFilterMatch($element)">One</li>
  <li data-model='{"odd":false}' data-bind="visible: isFilterMatch($element)">Two</li>
  <li data-model='{"odd":true}' data-bind="visible: isFilterMatch($element)">Three</li>
  <li data-model='{"odd":false}' data-bind="visible: isFilterMatch($element)">Four</li>
  <li data-model='{"odd":true}' data-bind="visible: isFilterMatch($element)">Five</li>
  <li data-model='{"odd":false}' data-bind="visible: isFilterMatch($element)">Six</li>
</ul>

JavaScript

if (typeof (INTOGlobal) == 'undefined') INTOGlobal = {};

INTOGlobal.UACController = function()
{
	var _this = this;
  
	this.ShowOdd = ko.observable(true);
  this.ShowEven = ko.observable(true);

	this.load = function() {}; // Required for KOApp
  
  this.isFilterMatch = function(el)
  {
  	var o = el.dataset && el.dataset.model && JSON.parse(el.dataset.model);
    
    return (_this.ShowOdd() && o.odd) || (_this.ShowEven() && !o.odd);
  }
};


// IGNORE THE BELOW, USE THE KOApp binding syntax from JobsList 
ko.applyBindings(new INTOGlobal.UACController());