JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<ul data-bind="foreach: Employees">
    <li>
        <span data-bind="text: FirstName"></span><br />
        <!-- ko foreach: Jobs -->
            -<span data-bind="text: JobTitle"></span>: <span data-bind="text: TotalSalary"></span><br />
        <!-- /ko -->
        <input type="button" value="Add Job" data-bind="click: $root.AddJob" />
    </li>
</ul>

JavaScript

var vm = ko.mapping.fromJS({"Title":"Some Title","Employees":[{"FirstName":"Johnny","LastName":"Bravo","Jobs":[{"JobTitle":"Software Developer","TotalSalary":"123.123"}]},{"FirstName":"Susan","LastName":"Bravo","Jobs":[{"JobTitle":"Accountant","TotalSalary":"444.222"}]}]});

    vm.AddJob = function (employee) {
        var job = ko.utils.unwrapObservable(employee.Jobs()[0]);

        // Deep copy
        var newJob = ko.utils.extend({}, job);

        newJob.JobTitle("New Title");
        newJob.TotalSalary("888");
        employee.Jobs.push(newJob);
    };

    console.log(vm);
    ko.applyBindings(vm);