JSFiddle - React, Tailwind, and code Playground

by Jan Föh

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<div data-bind="with: data">
    <p data-bind="text: a"></p>
    <p data-bind="text: b"></p>
</div>

JavaScript

var EditorViewModel = function EditorViewModel(data) {
    var _self = this;

    this.data = ko.observable();        

    this.update = function loadData(data) {
        ko.mapping.fromJS(data, _self.data()); 
    };

    this.data( ko.mapping.fromJS(data) );
};

var initialData = {
    a: 'Initial A',
    b: 'Initial B'
};

var viewModel = new EditorViewModel(initialData);

ko.applyBindings(viewModel);

var updatedData = {
    a: 'Updated A',
    b: 'Updated B'
};

setTimeout(function() {
    viewModel.update(updatedData);
}, 2000);