JSFiddle - React, Tailwind, and code Playground

by tgriley1

HTML

<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<!-- ko foreach: mappedMockData.assessors -->
<div>
    <p data-bind="text: fullName"></p>
</div>
<!-- /ko -->

JavaScript

var mockData = '{"people": [{"firstName": "Tom","lastName": "Riley"}]}';

var assessorViewModel = function (data) {
    ko.mapping.fromJS(data, {}, this);

    this.fullName = ko.computed(function () {
        return (this.firstName() + ' ' + this.lastName());
    }, this);
};

var mappingOverrides = {
    'people': {
        create: function (options) {
            return new assessorViewModel(options.data);
        }
    }
};

ViewModel = function (data) {
    this.mappedMockData = ko.mapping.fromJSON(data, mappingOverrides, null);
}

var vm = new ViewModel(mockData);
ko.applyBindings(vm);