JSFiddle - React, Tailwind, and code Playground

by jhorvath

HTML

<div><button data-bind="click: addRows">Add</button></div>
<div>
    <select data-bind="options: availableEntities, optionsText: 'Label', value: selectedEntity"></select>
</div>
<div data-bind="foreach: rows">
    <div>
        <select data-bind="options: Fields, optionsText: 'Label', value: SelectedField"></select>
        <span data-bind="text: SelectedField() != null ? SelectedField().Label : 'x'"></span>
        <select data-bind="options: Operators, optionsText: 'Label', value: SelectedOperator"></select>
        <span data-bind="text: SelectedOperator() != null ? SelectedOperator().Label : 'x'"></span>
    </div>
</div>
<div>
    <span data-bind="text: selectedEntity() != null ? selectedEntity().Label : ''"></span>
</div>

JavaScript

var accountFields = [ { Label: "Name" }, { Label: "Address" }, { Label: "Number" } ];
var contactFields = [ { Label: "FullName" }, { Label: "Address"}, { Label: "Street" } ];
var projectFields = [ { Label: "ProjectId" }, { Label: "Client" }, { Label: "Value" }];
var operators = [ { Label: "Equal" }, { Label: "Contains Data" } ];

var vm = function(){
    this.availableEntities = [ { Label: "Account", Id: 1, Fields: accountFields }, { Label: "Contact", Id: 2, Fields: contactFields }, { Label: "Project", Id: 3, Fields: projectFields }];
    this.selectedEntity = ko.observable(null);
    this.selectedEntity.subscribe(function(){
        this.rows([]);
    }.bind(this));
    this.rows = ko.observableArray([]);
    this.addRows = function() {
        if(this.selectedEntity()) {
            if(this.selectedEntity().Id == 1) {
                this.rows.push({ Fields: accountFields, SelectedField: ko.observable(null), Operators: operators, SelectedOperator: ko.observable(null)  });
            } else if(this.selectedEntity().Id == 2) {
                this.rows.push({ Fields: contactFields, SelectedField: ko.observable(null), Operators: operators, SelectedOperator: ko.observable(null)  });
            } else if(this.selectedEntity().Id == 3) {
                this.rows.push({ Fields: projectFields, SelectedField: ko.observable(null), Operators: operators, SelectedOperator: ko.observable(null)  });
            }
        }
    }.bind(this);
}

var viewModel = new vm();
ko.applyBindings(viewModel);