JSFiddle - React, Tailwind, and code Playground

by Valerie Ren

HTML

<div data-bind="foreach: items">
    <div>
        <button data-bind="click: visible.toggle()">Toggle</button>
        <table data-bind="visible: visible">
            <tr data-bind="foreach: [1,2,3,4,5]">
                <td data-bind="text: $data"></td>
            </tr>
        </table>
    </div>
</div>

JavaScript

ko.observable.fn.toggle = function () {
    var obs = this;
    return function () {
        obs(!obs())
    };
};

function Item() {
    var self = this;


}

function ViewModel() {
    var self = this;
    self.items = ko.observableArray([
    new Item(), new Item(), new Item(), new Item()]);
}

ko.applyBindings(new ViewModel());