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: content() === null, click: function(){ $root.getElementContentByIndex($index); }">load element's content</button>
            <!-- ko if: content() !== null -->
            <div data-bind="text: content"></div>
            <!-- /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", content: ko.observable(null) });
        self.elements.push({ title: "my grid", content: ko.observable(null) });
    
    };

    self.getElementContentByIndex = function(index) {
        // TODO: ajax request
        
        index = index();  // by default, arguments index is an observable
        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;
        }
    };
    
};

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