JSFiddle - React, Tailwind, and code Playground

by Mi Ku

HTML

<script src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script src="https://rawgithub.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<button data-bind="click: getModelAjax">Go</button>
<div data-bind="template: {name: 'model-template', foreach: arrViewModel}"></div>
<script id="model-template" type="text/html">
    <div>
        <span data-bind="text: firstName"></span>
        <span data-bind="text: lastName"></span>
    </div>
</script>

JavaScript

// Contained Model
/*function SomeModel() {
    this.Firstname = ko.observable();
    this.Lastname = ko.observable();
}*/

// View Model
function koViewModel() {
    var self = this;
    this.arrViewModel = ko.mapping.fromJS([]);
    
    this.getModelAjax = function() {
        $.ajax({
            type: 'POST',
            url: '/echo/json/',
            data: {
                json: JSON.stringify(
                [{
                    firstName: "fname1",
                    lastName: "lname1"},
                {
                    firstName: "fname2",
                    lastName: "lname2"}
                ]),
                delay: 0
            },
            context: this,
            success: function(data) {
                ko.mapping.fromJS(data, self.arrViewModel);
            },
            dataType: 'json'
        });
    };

}

ko.applyBindings(new koViewModel());