JSFiddle - React, Tailwind, and code Playground

by Jaak Kütt

HTML

<script type="text/html" id="active">
    <li style="color:green"><span data-bind="text: name"></span></li>
</script>
<script type="text/html" id="inactive">
    <li style="color:red"><span data-bind="text: name"></span></li>
</script>


<ul data-bind='template: { name: displayMode,
                           foreach: employees }'> </ul>

<button onclick="viewModel.employees()[1].active(viewModel.employees()[1].active()?false:true);">toggl Brynn</button>

JavaScript

window.viewModel = {
        employees: ko.observableArray([
            { name: "Kari", active: ko.observable(true) },
            { name: "Brynn", active: ko.observable(false) },
            { name: "Nora", active: ko.observable(false) }
        ]),
        displayMode: function(employee) {
            // Initially "Kari" uses the "active" template, while the others use "inactive"
            return employee.active() ? "active" : "inactive";
        }
    };

ko.applyBindings(viewModel);