JSFiddle - React, Tailwind, and code Playground

by Mathachew

HTML

<div data-bind="foearch: rules">
</div>

JavaScript

Rule = function () {};

Rule.prototype.getValues = function () { console.log('getValues not implemented'); };
Rule.prototype.setValue = function() { console.log('setValue not implemented'); };

StaticText = function () { Rule.call(this); };
StaticText.prototype = Object.create(Rule.prototype, { constructor: { value: StaticText } });

SelectList = function (multi) {
    this.Multiple = multi || false;
    Rule.call(this);
};
SelectList.prototype = Object.create(Rule.prototype, { constructor: { value: SelectList } });
SelectList.prototype.getValues = function () {};
SelectList.prototype.setValue = function (index, value) {};

TextBox = function () { Rule.call(this); };
TextBox.prototype = Object.create(Rule.prototype, { constructor: { value: TextBox } });

RelativeDate = function () { Rule.call(this); };
RelativeDate.prototype = Object.create(Rule.prototype, { constructor: { value: RelativeDate } });

var Properties = {
    AppVersion: {
        Rules: [
            {
                Type: new SelectList(),
                Options: ['equals', 'does not equal']
            },
            {
                Type: new TextBox()
            }
        ]
    },
    Event: {
        Rules: [
            {
                Type: new SelectList(),
                Options: [] // Populated via ajax request
            },
            {
                Type: new SelectList(),
                Options: ['ever', 'more than', 'less than']
            },
            {
                Type: new RelativeDate()
            }
        ]
    }
};

function ViewModel() {
    var self = this;
    
    self.rules = ko.observableArray([]);
}

ko.applyBindings(new ViewModel());