JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.13/themes/base/minified/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.2/knockout.mapping.min.js"></script>
<div style="background-color:red"  data-bind=" with: SelectedMetadata">
        <label>
            Field Name:</label><br />
        <input data-bind="value:FieldName" type="text" />
        <input id="chkIsRequired" type="checkbox" data-bind="checked:IsRequired" />
        <label for="chkIsRequired">
            Is Required</label>
        <br />
        <label>
            Selected Type:</label><br />
        <select data-bind="options:AvailableTypes, value:SelectedType, optionsCaption:'Select the DataType...'">
        </select>
        <div data-bind="visible:AllowMinMax">
            Number Range<br />
            <input data-bind="value:MinValue" type="text" style="width: 45%" />
            to
            <input data-bind="value:MaxValue" type="text" style="width: 45%" />
        </div>
        <br />
        <label>
            Control Type:</label><br />
        <select data-bind="options:AvailableOptionTypes, value:SelectedOptionType ">
        </select><br />
        <br />
        <label>
            Options
        </label>
        <div style="border: 1px solid #000; overflow: auto; max-height: 150px;">
            <input type="button" data-bind="click:AddOption, button:{}" value="Add Option" /><br />
            <div data-bind="foreach:Options">
                <p>
                    <input data-bind="value:OptionValue" type="text" /><input type="button" value="Remove"
                        data-bind="click:Remove" />
                </p>
            </div>
        </div>
    </div>






<input type="button" value="New MetaData" data-bind="click:AddMetadata" />
   


    <table class="grid">
        <thead>
           ...

CSS

body {
    font-size: 14px;
}

JavaScript

ko.bindingHandlers.button = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {

        //$(element).button();
    }
};




ko.bindingHandlers.dialogSelectedMethod = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here 
         $(element).hide();
        $(element).dialog({
            close: function() {
                if (valueAccessor()() != null) {
                    valueAccessor()(null);
                }
            },
            width: 600,
            height: 400,
            autoOpen: false,
            modal: true,
            title: "Edit Metadata"
        });
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        // This will be called once when the binding is first applied to an element,
        // and again whenever the associated observable changes value.
        // Update the DOM element based on the supplied values here.                      
 
        if (valueAccessor()() != null) {
            $(element).dialog('open');
            //  valueAccessor()().IsEditing(true);
        }
        else {
            $(element).dialog('close');
        }
    }
};

var mapping = {
    'Metadatas': {
        create: function(options) {
            var newMetaData = new MetadataViewModel(options.parent);
            
            newMetaData.Id(options.data.id);
            newMetaData.FieldName(options.data.FieldName);
            newMetaData.SelectedType(options.data.SelectedType);
            newMetaData.SelectedOptionType(options.data.SelectedOptionType);
            newMetaData.IsRequired(options.data.IsRequired);
            newMetaData.Options(options.data.Options);
            
            // You can get current viewModel...