JSFiddle - React, Tailwind, and code Playground

by sohimohit

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="https://rawgit.com/rniemeyer/knockout-postbox/master/src/knockout-postbox.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<div id="branchArea"  data-bind="visible: !isVisible()">
<table style="width:100%;" data-bind="visible:showFields">

            <tbody>
                <tr>
                    <th style="width:100px;">Branch </th>
                    <th style="width:100px;">Enter Value</th>
                </tr>
                </tbody>
            <tr>
                <td>Branch ID (int):</td>
                <td>
                    <input data-bind="value: BranchId" />
                    </td> <!--,valueUpdate:'keypress'-->
            </tr>
            <tr>
                <td>Name :</td>
                <td>
                    <input type="text" placeholder="Name" data-bind="value:name,validationElement:name"> </td>
            </tr>
            <tr>
                <td>Description :</td>
                <td>
                    <input data-bind="value: description" /></td>
            </tr>

            <tr>
                <td>template :</td>
                <td>
                    <select data-bind="options: templates, value: 
                    template, optionsCaption: 'Select template...'"></select></td>
            </tr>
            <tr>
                <td>metaKeyword :</td>
                <td>
                    <input data-bind="value: metaKeyword" /></td>
            </tr>
            <tr>
                <td>metaDescription :</td>
                <td>
                    <input data-bind="value: metaDescription" /></td>
            </tr>
            <tr>
                <td>metaTitle :</td>
                <td>
                    <input data-bind="value: metaTitle" /></td>
            </tr>
            <tr>
                <td>EnableSearch :</td>
   ...

JavaScript

var dummyData = [{"BranchId":"1","name":"us","description":"united states","template":"template1","metaKeyword":"us","metaDescription":"us","metaTitle":"us","enableSearch":"Yes"},{"BranchId":"2","name":"europe","description":"europe","template":"template1","metaKeyword":"euro","metaDescription":"euro","metaTitle":"euro","enableSearch":"Yes"},{"BranchId":"3","name":"aus","description":"aus","template":"template1","metaKeyword":"aus","metaDescription":"aus","metaTitle":"aus","enableSearch":"Yes"}];

ko.validation.configure({
    insertMessages: false,
    decorateElement: true,
    errorElementClass: 'error-element',
    errorClass: 'error-element',
    errorsAsTitle: true,
    parseInputAttributes: false,
    messagesOnModified: true,
    decorateElementOnModified: true,
    decorateInputElement: true
});
function BranchArea(data) {
    this.BranchId = ko.observable(data.BranchId || "");
    this.name = ko.observable(data.name  || "");
    this.description = ko.observable(data.description  || "");
    this.template = ko.observable(data.template  || ['template1', 'template2']);
	this.enableSearch = ko.observable(data.enableSearch  || ['Yes', 'No']);
    this.metaKeyword = ko.observable(data.metaKeyword  || "");
    this.metaDescription = ko.observable(data.metaDescription  || "");
    this.metaTitle = ko.observable(data.metaTitle  || "");
    this.enableSearch = ko.observable(data.enableSearch  || ['Yes', 'No']);
}

function BranchAreaViewModel() {
    var self = this;
	self.isVisible = ko.observable(false);

    self.showDiv = function(data)
    {
        branchView.BranchAreaId(data.BranchId());
        changeVisibility();
    }
    self.enableSearches = ko.observableArray(['Yes', 'No']);
    self.templates = ko.observableArray(['template1', 'template2']);
    self.BrancheAreas = ko.observableArray([]);
	self.PopulateBranches = ko.computed(function(){
        ko.utils.arrayForEach(dummyData, function(item){
            self.BrancheAreas.push(new...