JSFiddle - React, Tailwind, and code Playground

by Sourabh Tewari

HTML

<script id="ParamHomeTmpl" type="text/html">
        <section class="alert alert-info">
            <div class="panel-heading h3  blackincolor"><i class="fa fa-exclamation-circle redincolor" style="margin-right: 5px"></i>Please Select Parameter Type</div>

            <ul class="blackincolor list-group">
                <li><a class="list-group-item list-group-item-info" data-bind="click: templateToUse" href="#" id="InputType"><b>Input Type:</b> Gives an Option to Select your Key-Value Pairs.</a></li>

                <li><a class="list-group-item list-group-item-success" data-bind="click: templateToUse" href="#" id="ListType"><b>List Type:</b> You can type in a Key and insert a list of values and select one of the values that you created.</a></li>
            </ul>
        </section>
    </script>

    <script id="InputTypeTmpl" type="text/html">
        <div>
            <p>Input Type</p>
        </div>
    </script>

    <script id="ListTypeTmpl" type="text/html">
        <div>
            <p>ListType</p>
        </div>
    </script>

    <script id="BlankTmpl" type="text/html">
       
    </script>

   <div class="tab-pane" id="SelectParamType" data-bind="template: { name: 'ParamHomeTmpl' }">
                            </div>
 <div class="tab-pane" id="Attributes" data-bind="template: { name: templateToUse }">
                            </div>

JavaScript

var templateType = "BlankTmpl";
var viewModel = {
       
};

viewModel.templateToUse = function (data, event) {
    try {
        
        switch (event.target.id) {

            case "InputType":
                templateType = "InputTypeTmpl";
                break;

            case "ListType":
                templateType = "ListTypeTmpl";
                break;

            case "FileType":
                templateType = "FileTypeTmpl";
                break;

            case "DataBaseType":
                templateType = "DataBaseTypeTmpl";
                break;

            default:
                return "BlankTmpl";

        }
    }
    catch (err) { return "BlankTmpl" ;}
        ko.applyBindingsToNode(document.getElementById("Attributes"), { template: { name: templateType } });

};

ko.applyBindings(viewModel);