JSFiddle - React, Tailwind, and code Playground

by Sourabh Tewari

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<button data-bind="click: GetModelsByAjax">Go</button>
<div data-bind="template: {name: 'model-template'}"></div>
<script id="model-template" type="text/html">
 <table class="table table-hover table-condensed" data-bind='visible: ArrayOfModels().length >0'>
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Value</th>
                                            <th>Data type</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody data-bind="foreach: ArrayOfModels">
                                        <tr>
                                            <td data-bind="text: param_key" style="width: 20%"></td>
                                            <td data-bind="text: param_value" style="width: 20%"></td>
                                            <td data-bind="text: param_db_type" style="width: 20%"></td>
                                        </tr>
                                    </tbody>
                                </table>
</script>

JavaScript

function SomeModel() {
    this.param_id = ko.observable();
    this.param_db_type = ko.observable();
    this.param_key = ko.observable();
    this.param_value = ko.observable();
}

function SomeViewModel() {
    var self = this;

    this.ArrayOfModels = ko.mapping.fromJS([]);

    this.GetModelsByAjax = function () {
        $.ajax({
            type: 'POST',
            url: '/echo/json/',
            data: {
                json: JSON.stringify([{
                    "param_id": 10,
                    "param_db_type": "Integer",
                    "param_key": "$$DATA_END_TIME",
                    "param_value": "1433490045"
                }]),
                delay: 0},
                context: this,
                success: function (data) {
                    self.SuccessfullyRetrievedModelsFromAjax(data);
                },
                dataType: 'json'
            });
        };

        this.SuccessfullyRetrievedModelsFromAjax = function (models) {
            ko.mapping.fromJS(models, self.ArrayOfModels);
            console.log(ko.toJS(self.ArrayOfModels));
        };
    }

    ko.applyBindings(new SomeViewModel());