JSFiddle - React, Tailwind, and code Playground

by aknuds1

HTML

<script src="https://raw.github.com/desandro/isotope/master/jquery.isotope.js"></script>
<script src="https://raw.github.com/aknuds1/knockout/master/build/output/knockout-latest.debug.js"></script>
<script src="https://raw.github.com/aknuds1/knockout-isotope/master/lib/knockout-isotope.js"></script>
Isotope Filter:
<select data-bind="options: filters, value: isoFilter"></select>
<div id="myContainer" data-bind="isotope: isotopefilteredThings, isotopeOptions: isotopeOptions">
    <div class="thing" data-bind="text: stuff, css: type"></div>
</div>Foreach Filter:
<select data-bind="options: filters, value: foreachFilter"></select>
<div id="myContainer2" data-bind="foreach: foreachFilteredThings">
    <div class="thing" data-bind="text: stuff, css: type"></div>
</div>

CSS

/*
https://raw.github.com/aknuds1/knockout-isotope/master/lib/knockout-isotope.js
https://raw.github.com/aknuds1/knockout/master/build/output/knockout-latest.debug.js
https://raw.github.com/desandro/isotope/master/jquery.isotope.js
*/
 body {
    padding: 20px;
}
.isotope-item, .thing {
    width: 200px;
    height: 140px;
    margin-right: 10px;
    margin-bottom: 10px;
    line-height: 140px;
    background-color: blue;
    border: none;
    border-radius: 4px;
    text-align: center;
}
.isotope-item.type2, .thing.type2 {
    background: red;
}
.thing {
    float: left;
}
/**** Isotope Filtering ****/
 .isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
/**** Isotope CSS3 transitions ****/
 .isotope, .isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
 .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}

JavaScript

var ViewModel = function () {
    var self = this;

    this.filterValue = ko.observable();

    this.things = ko.observableArray([{
        type: 'type1',
        stuff: 'Thing1'
    }, {
        type: 'type1',
        stuff: 'Thing2'
    }, {
        type: 'type2',
        stuff: 'Thing3'
    }, {
        type: 'type2',
        stuff: 'Thing4'
    }, {
        type: 'type2',
        stuff: 'Thing5'
    }, {
        type: 'type2',
        stuff: 'Thing6'
    }]);
    self.isotopeThings = ko.observableArray(self.things());

    this.filters = ko.observableArray([
        'none',
        'type1',
        'type2']);

    this.isoFilter = ko.observable(false);
    this.foreachFilter = ko.observable(false);
    this.itemFilter = ko.computed(function () {
        var value = self.filterValue();
        if (value != 'none') {
            console.log('Filtering array: ' + value);
            ko.utils.arrayFilter(self.things, function (thing) {
                return thing.type === value;
            });
        } else {
            return self.things;
        }
    });

    this.isotopefilteredThings = ko.computed(function () {
        var filter = self.isoFilter();
        if (filter !== 'none') {
            return ko.utils.arrayFilter(self.isotopeThings(), function (thing) {
                return thing.type === value;
            });
        }
        console.log('Isotope filtered: ' + things);
        return self.isotopeThings();
    });

    this.foreachFilteredThings = ko.computed(function () {
        self.filterValue(self.foreachFilter());
        return self.itemFilter();
    });

    this.isotopeOptions = function () {
        return {
            layoutMode: 'fitRows'
        };
    };
};

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