JSFiddle - React, Tailwind, and code Playground

by Ignacio Fuentes

HTML

<input type="button" data-bind="click:addItem" value="Add item to the list"/>
        <input type="button" data-bind="click:clearItems" value="Clear items"/>
        <div data-bind="template:{name: getTemplateName, data: items}"></div>
        <script type="text/html" id="emptyTemplate">
            <div>
                There are not items in the list
            </div>
        </script>
        <script type="text/html" id="tableTemplate">
            <table>
                <thead>
                    <tr>
                        <th>Number</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach:$data">
                    <tr>
                        <td data-bind="text:number"></td>
                    </tr>
                </tbody>
            </table>
        </script>

JavaScript

function ViewModel() {
    var self = this;

    self.items = ko.observableArray([]);
    var counter = 0;
    self.addItem = function() {
        self.items.push({
            number: ++counter
        });
    };
    self.clearItems = function() {
        self.items([]);
    };
    self.getTemplateName = function() {
        if (self.items().length == 0) return "emptyTemplate";
        else return "tableTemplate";
    };
}
setTimeout(function() {
    ko.applyBindings(new ViewModel());
}, 1000);