JSFiddle - React, Tailwind, and code Playground

by rniemeyer

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<h2>Planets</h2>
<p> 
    <label>
        <input type='checkbox' data-bind='checked: displayAdvancedOptions' />
        Display advanced options
    </label>
</p>
 
<p data-bind='fadeVisible: displayAdvancedOptions'>
    Show:
    <label><input type='radio' name="type" value='all' data-bind='checked: typeToShow' />All</label>
    <label><input type='radio' name="type" value='rock' data-bind='checked: typeToShow' />Rocky planets</label>
    <label><input type='radio' name="type" value='gasgiant' data-bind='checked: typeToShow' />Gas giants</label>
</p>
<!-- ko if: planets().length > 0 -->
<div data-bind='template: { foreach: planets,
                            beforeRemove: hidePlanetElement,
                            afterAdd: showPlanetElement }'>
    <div data-bind='attr: { "class": "planet " + type }, text: name + " - " + Date()'> </div>
</div>
<!-- /ko --> 

<button data-bind='click: addPlanet.bind($data, "rock")'>Add rocky planet</button>
<button data-bind='click: addPlanet.bind($data, "gasgiant")'>Add gas giant</button>

JavaScript

$(function() {

    var PlanetsModel = function() {
        this.planets = ko.observableArray([
            {
            name: "Mercury",
            type: "rock"},
        {
            name: "Venus",
            type: "rock"},
        {
            name: "Earth",
            type: "rock"},
        {
            name: "Mars",
            type: "rock"},
        {
            name: "Jupiter",
            type: "gasgiant"},
        {
            name: "Saturn",
            type: "gasgiant"},
        {
            name: "Uranus",
            type: "gasgiant"},
        {
            name: "Neptune",
            type: "gasgiant"},
        {
            name: "Pluto",
            type: "rock"}
        ]);

        this.typeToShow = ko.observable("all");
        this.displayAdvancedOptions = ko.observable(false);

        this.addPlanet = function(type) {
            this.planets.push({
                name: "New planet",
                type: type
            });
        };

        // Animation callbacks for the planets list
        this.showPlanetElement = function(elem) {
            if (elem.nodeType === 1) {
                $(elem).hide().slideDown();
            }
        }
        this.hidePlanetElement = function(elem) {
            if (elem.nodeType === 1) {
                $(elem).slideUp(function() {
                    $(elem).remove();
                })
            }
        }
    };

    // Here's a custom Knockout binding that makes elements shown/hidden via jQuery's fadeIn()/fadeOut() methods
    // Could be stored in a separate utility library
    ko.bindingHandlers.fadeVisible = {
        init: function(element, valueAccessor) {
            // Initially set the element to be instantly visible/hidden depending on the value
            var value = valueAccessor();
            $(element).toggle(ko.utils.unwrapObservable(value)); // Use "unwrapObservable" so we can handle values that may or may not be observable
        },
        update:...