JSFiddle - React, Tailwind, and code Playground

by antouank

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<h2>Category : Trousers</h2>
<h3>Sizes</h3>
<ul data-bind="foreach: sizeFilter">
    <li>
        <input type="checkbox" data-bind="checked: on, click: updateFilter" />
        <label data-bind="text: value"></label>
    </li>
</ul>
<h3>Colors</h3>
<ul data-bind="foreach: colorFilter">
    <li>
        <input name="colorFilter" type="checkbox" data-bind="checked: on, click: updateFilter" />
        <label for="colorFilter" data-bind="text: value"></label>
    </li>
</ul>
 <h3>Products</h3>
<ul data-bind="foreach: data">
    <li data-bind="visible: visible">
        <label data-bind="text: name"></label>-
        <label data-bind="text: size"></label>-
        <label data-bind="text: color"></label>
    </li>
</ul>

CSS

body{
    background-color: #444;
    color: #ccc;
}

JavaScript

//    jQuery 1.10 loaded
    
    var myAPP = (function($,ko){
        
        // trouserModel constructor
        var TrouserModel = function(id,name,color,size,visible){
            // maybe better if fields are ko observable, depends on other details
            this.id = id||0,
            this.name = name||'',
            this.color = color||'',
            this.size = size||'',
            this.visible = visible||true;
            
            return ko.observable(this);
        }
        
        // main viewmodel
        var trouserProducts = {
            data: ko.observableArray(),
            filters: ko.observableArray()
        }
    
        trouserProducts.sizeFilter = ko.computed(setFilter('size'));
        trouserProducts.colorFilter = ko.computed(setFilter('color'));
        trouserProducts.updateFilter = function(element, valueAccessor, allBindingsAccessor) {
            
            var ar = trouserProducts.data();
            if(!ar[0]) return true;
            var activeFilters = trouserProducts.filters().filter(function(el){return el().on;});
            
            for(var i=0; i<ar.length; i++){
                
                for(var j=0; j<activeFilters.length; j++){
                    var thisProp = ar[i]()[activeFilters[j]().prop].toLowerCase();
                    
                    if( thisProp===activeFilters[j]().value ){
                        var that = ar[i]();
                        
                        ar[i]({
                            id: that.id,
                            name: that.name,
                            color: that.color,
                            size: that.size,
                            visible: true
                        });
                        break;
                    }
                }
                if( j===activeFilters.length ){
                    var that = ar[i]();
                    
                    ar[i]({
                        id: that.id,
                    ...