JSFiddle - React, Tailwind, and code Playground

by arhari

HTML

<script src="https://github.com/SteveSanderson/knockout.mapping/raw/master/build/output/knockout.mapping-latest.js"></script>
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<span>Text:</span><input type="text" data-bind="value: text" />
<span data-bind="text: data.text"></span><br />
<ul data-bind="foreach: data.arr">
    <li><span data-bind="text: key"></span>:
        <span data-bind="text: value"></span></li>
</ul>
<button data-bind="click: load">Load</button>
<button data-bind="click: change">Change</button><br />
<span data-bind="text: json"></span>

JavaScript

var initData = {text: 'Some Text', 
                arr: [{key: 1, value: 'a'}, 
                      {key: 2, value: 'b'}]};
var newData = {text: 'Changed Text', 
                arr: [{key: 1, value: 'aa'}, 
                      {key: 2, value: 'bb'},
                      {key: 3, value: 'cc'}]};

var viewModel = function (data) {
    var self = this;
    this.vm= ko.mapping.fromJS(data);
    this.json = ko.computed(function() {
        return JSON.stringify(ko.mapping.toJS(self.vm));
    });
    this.load = function() {
        ko.mapping.fromJS(initData, {}, self.vm);
    };                         
    this.change = function() {
        ko.mapping.fromJS(newData, {}, self.vm);
    };                         
};
ko.applyBindings(new viewModel(initData).vm);