JSFiddle - React, Tailwind, and code Playground

by Jan Föh

HTML

<div data-bind="with: g">

<div><input type="text" data-bind="value: gname" /></div>


<table>

<tbody>
    <tr data-bind="with:gdetails">
        <td>
            <select data-bind="options: window.eventschemas, optionsText: 'schema', value:eventschemacondition().schema"></select>
            <table data-bind="with:eventschemacondition().schema">

                <tbody data-bind="foreach: schemaconditiondetails">
                    <tr>
                        <td><input type="text" data-bind='value: schemaproperty' style="width:150px" /></td>
                        <td data-bind="with:schemaproperty"><select data-bind="options: schemaconditions, optionsText:'propertycondition', value:propertycondition" style="width:150px"></select></td>
                        <td><input type="text" data-bind='value:propertyvalue' style="width:150px" /></td>
                    </tr>
                </tbody>
            </table>
        </td>

    </tr>
</tbody>
</table>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

JavaScript

var eventschemas = [{
    "schema": "Test",
    "schemaconditiondetails": [{
        "schemaproperty": "Test1",
        "schemaconditions": [{
            "propertycondition": "propertycondition1"
        }, {
            "propertycondition": "propertycondition2"
        }]
    }, {
        "schemaproperty": "Test2",
        "schemaconditions": [{
            "propertycondition": "propertycondition1"
        }, {
            "propertycondition": "propertycondition2"
        }]
    }]
}, {
    "schema": "Another Test",
    "schemaconditiondetails": [{
        "schemaproperty": "Another Test1",
        "schemaconditions": [{
            "propertycondition": "propertycondition1"
        }, {
            "propertycondition": "propertycondition2"
        }]
    }, {
        "schemaproperty": "Another Test2",
        "schemaconditions": [{
            "propertycondition": "propertycondition1"
        }, {
            "propertycondition": "propertycondition2"
        }]
    }]
}];

var AppScope = function() {
    function EventSchemaConditionDetails(data) {
        this.schemaproperty = ko.observable(data.schemaproperty);
        this.propertycondition = ko.observable(data.propertycondition);
        this.propertyvalue = ko.observable(data.propertyvalue);
    };

    function EventSchemaCondition(data) {
        this.schema = ko.observable(data.schema);
        this.schemaconditiondetails = ko.observableArray(data.schemacondition);
    };

    function Gdetails(data) {
        this.eventschemacondition = ko.observable(data.eventschemacondition);

    };

    function G(data) {
        this.gname = ko.observable(data.gname);
        this.gdetails = ko.observable(data.gdetails);
    };

    function GsViewModel() {
        var self = this;
        self.g = ko.observable(new G({
            gname: "",
            gdetails: new Gdetails({
                eventschemacondition: new EventSchemaCondition({
                    schema: "",
                   ...