javascript - 使用下拉菜单更改多个文本框

Question

我有以下 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'" />

它受以下 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));

除了 updateEmployee 函数之外，一切都运行良好。 JSON 返回新的员工信息，但文本框未更新。我做了一些愚蠢的错误事情，而且我不太明白到底是什么

Answer 1

而不是

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

你应该这样做

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

这将更新 self.Employee 上由第一次调用 ko.mapping.fromJS 创建的所有可观察属性。