JSFiddle - React, Tailwind, and code Playground

by Sourabh Tewari

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/humanity/jquery-ui.css">
<script src="http://knockoutjs.com/downloads/knockout-3.3.0.js"></script>
<script src="http://silviomoreto.github.io/bootstrap-select/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="http://silviomoreto.github.io/bootstrap-select/bootstrap-select.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="addParamsDiv">
    <input type="text" id="paramKeyInp" data-bind="event: { change: value_changed }, valueUpdate: 'afterkeydown'" />
    <input type="text" id="paramValueInp" data-bind="event: { change: value_changed }, valueUpdate: 'afterkeydown'" />
    <select data-bind="selectPicker: selectedDataType, selectPickerOptions: { optionsArray: dbParams }, optionsText: 'value', optionsValue: 'id'" id="SelectParamForDb" class="selectpicker show-tick"></select>

        <button id="InputSubmitBtn" class="ABACButton" type="submit" data-bind="enable: false, click: AddParam">Add</button>
</div>
<table id="paramtypeTbl" data-bind="template: { name: 'paramDataTmpl' }" style="margin-top: 10px"></table>

 <script id="paramDataTmpl" type="text/html">
        <span data-bind="text: ParamData().length, visible: ParamData().length > 0">Params</span>
        <div data-bind="visible: ParamData().length > 0" class="formoid-solid-blue" style="background-color: #FFFFFF; font-size: 14px; font-family: 'Roboto',Arial,Helvetica,sans-serif; color: #34495E; max-width: 480px; min-width: 450px; float: left">
            <div class="title">
                <h2>Parameters</h2>
            </div>

            <div class="element-input">
                <table class="item-cont table table-hover table-condensed table-responsive">
                    <thead>
        ...

JavaScript

$('#tagDialog').hide();


var ParamConstr = function (key, value, dataType) {
    return {
        paramKey: ko.observable(key),
        paramValue: ko.observable(value),
        dataType: ko.observable(dataType)
    }
};
var viewModel = {
    selectedParam: ko.observable(),
    ParamData: ko.observableArray([]),
    dbParams: ko.observableArray([{
        id: 'Varchar',
        value: 'Varchar'
    }, {
        id: 'Integer',
        value: "Integer"
    }, {
        id: 'Date',
        value: 'Date'
    }, {
        id: 'Datetime',
        value: 'Datetime'
    }]),
    selectedDataType: ko.observable('Integer'),
    value_changed: function () {
        if ($.trim($('#paramValueInp').val()).length > 0 && $.trim($('#paramKeyInp').val()).length > 0) {
            $('#InputSubmitBtn').removeAttr('disabled');
        } else {
            $('#InputSubmitBtn').attr('disabled', 'disabled');
        };
    },
    AddParam: function () {
        var match = ko.utils.arrayFirst(ko.toJS(ParamData), function (item) {
            if (item.paramKey === "$$" + $.trim($('#paramKeyInp').val())) return true;
            else return false;
        });
        if (!match) {
            ParamData.push(new ParamConstr("$$" + $('#paramKeyInp').val(), $('#paramValueInp').val(), $('#SelectParamForDb :selected').val()));
           
        } 
    }
}

ko.bindingHandlers.selectPicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        if ($(element).is('select')) {
            if (ko.isObservable(valueAccessor())) {
                if ($(element).prop('multiple') && $.isArray(ko.utils.unwrapObservable(valueAccessor()))) {
                    // in the case of a multiple select where the valueAccessor() is an observableArray, call the default Knockout selectedOptions binding
                    ko.bindingHandlers.selectedOptions.init(element, valueAccessor, allBindingsAccessor);
                } else {
                    // regular select and observable so...