JSFiddle - React, Tailwind, and code Playground

by igalst

HTML

<div id="wrapper">
    <button type="button" data-bind="click: getElements">load elements structure</button>
    
    <ul data-bind="foreach: elements">
        <li>
            <h2 data-bind="text: title"></h2>
            <button type="button" data-bind="visible: !$root.hasContent($data), click: function(){ $root.getElementContentByIndex($index); }">load element's content</button>
            <!-- ko if: $root.hasContent($data) -->
                <!-- ko if: template === "simple" -->
                    <div data-bind="text: content"></div>
                <!-- /ko -->
                <!-- ko if: template === "grid" -->
                    <table>
                        <tbody data-bind="foreach: content">
                            <tr data-bind="foreach: $data">
                                <td data-bind="text: $data"></td>
                            </tr>
                        </tbody>
                    </table>
                <!-- /ko -->
            <!-- /ko -->
        </li>
    </ul>
    
    <h3>debugger</h3>
    <div data-bind="text: ko.toJSON($root)"><div>
</div>

JavaScript

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

    self.elements = ko.observableArray();

    self.getElements = function(){
        // TODO: ajax request
        
        self.elements.push({ title: "some title", template: "simple", content: ko.observable(null) });
        self.elements.push({ title: "my grid", template: "grid", content: ko.observable(null) });
    
    };

    self.getElementContentByIndex = function(index) {
        // TODO: ajax request
        
        // when commes from ko click by default, arguments index is an observable
        if (typeof index !== "number") {
            index = index(); 
        }
        
        var element = self.elements()[index];
        
        switch (index) {
            case 0:
                element.content("some content");
                break;
            case 1:
                element.content([
                    ["cell 1", "cell 2", "cell 3"],
                    ["1", "2", "3"],
                    ["A", "B", "C"],
                    ["a", "b", "c"]
                ]);
                break;
        }
    };
    
    self.hasContent = function(data) {
        return data.content() !== null;
    }
    
};

ko.applyBindings(new ViewModule(), document.getElementById("wrapper"));