Changing multiple textboxes with dropdown knockout

Question

I have the following HTML:

<select id="EmpName" data-bind="value: Employee.EmpName, event: { change: $root.updateEmployee }"></select>
<input disabled type="text" id="EmpNum" data-bind="value: Employee.EmpNum, valueUpdate: 'input'" />
<input disabled type="text" id="EmpClass" data-bind="value: Employee.EmpClass, valueUpdate: 'input'" />
<input disabled type="text" id="EmpDept" data-bind="value: Employee.EmpDept, valueUpdate: 'input' " />
<input disabled type="text" id="EmpStat" data-bind="value: Employee.EmpStat, valueUpdate: 'input'" />

And it's bound by the following ViewModel:

generalViewModel = function (thisData) {
        var self = this;

        this.Incident = ko.mapping.fromJS(thisData.Incident);
        this.Employee = ko.mapping.fromJS(thisData.Employee);

        this.updateEmployee = function () {
            var employeeName = self.Employee.EmpName;
            $.getJSON('/Incidents/GetEmployee', { EmployeeName: employeeName }, function (data, status, xhr) {
                    var newEmp = ko.mapping.fromJS(data);
                    self.Employee(newEmp);
                });
        }

        this.refreshData = function (incID) {
            GetIncidentGeneralInfo(incID, node);
        }

        this.savetoServer = function (incID, buttonID) {
            var incident = ko.toJSON(self.Incident);
            var employee = ko.toJSON(self.Employee);
            $.post('/Incidents/SaveIncident', { IncidentID: incID, JSONIncident: incident, JSONEmployee: employee, button: buttonID }, function (data, status, xhr) {
                self.refreshData(data);
            });
        }
    }

    ko.applyBindings(new generalViewModel(data), document.getElementById(node));

Everything is working quite nicely, with the exception of the updateEmployee function. The JSON is returning the new Employee information, but the textboxes aren't updating. I'm doing something silly incorrectly, and I can't quite figure out wat

Answer 1

Instead of

var newEmp = ko.mapping.fromJS(data);
self.Employee(newEmp);

You should do

ko.mapping.fromJS(data, self.Employee);

This will update all of the observable properties on self.Employee that were created by the first call to ko.mapping.fromJS.