У меня есть следующий 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 возвращает новую информацию Employee, но текстовые поля не обновляются. Я делаю что-то глупо неправильно, и я не могу понять
Вместо
var newEmp = ko.mapping.fromJS(data);
self.Employee(newEmp);
Ты должен сделать
ko.mapping.fromJS(data, self.Employee);
Это обновит все наблюдаемые свойства на self.Employee
которые были созданы при первом вызове ko.mapping.fromJS
.