来自 JS 和 JSON 的敲除映射在集合中不起作用?
knockout mapping fromJS fromJSON isn't working inside a collection?
我有我的根剔除模型,它包含一个 VisitEntries 集合,每个条目都有一个名为 RoomProfile 的对象。当用户创建访问条目(将房间添加到他们的访问列表)时,房间的配置文件数据应该加载并显示给该集合内的用户。但我无法更新关联模型。我以前在其他领域做过这个没问题。我认为存在问题,因为我正在我的根 mappedModel
上制作 VisitEntryToAdd
的副本,或者因为它在一个集合中。我不确定,但这是我与其他时候唯一不同的地方。
mappedModel.addVisitEntry = function () {
var visitEntryToAdd = ko.mapping.fromJS(ko.mapping.toJS(mappedModel.VisitEntryToAdd));
$.ajax({
url: '/GetRoomProfileForVisit',
type: 'POST',
data: ko.mapping.toJSON({ Id: visitEntryToAdd.SelectedRoom.Id() }),
dataType: "json",
contentType: 'application/json; charset=utf-8',
success: function (data) {
if (data !== null) {
console.log("Checking entry before assigning room profile data: \n" + ko.mapping.toJSON(visitEntryToAdd));
console.log("Room Profile Data Loaded:\n" + ko.mapping.toJSON(data));
ko.mapping.fromJS(data, {}, visitEntryToAdd.RoomProfile);
console.log("Checking entry after assigning room profile data: \n" + ko.mapping.toJSON(visitEntryToAdd));
}
mappedModel.VisitEntries.push(visitEntryToAdd);
}
});
}
通过上面的代码:
首先 console.log 显示 visitEntryToAdd
具有所有正确的字段,包括 RoomProfile
,它在我添加房间配置文件数据之前设置为空。
第二个 console.log 确认我的 ajax 方法处理了 return 数据并且其格式正确。
第三个 console.log 显示相同的 visitEntryToAdd
,并且其上的 RoomProfile
仍然为空。
我可以通过以下方式实现此功能:
visitEntryToAdd.RoomProfile(ko.mapping.fromJS(data));
但我不确定为什么仅使用 fromJS
命令它不起作用,因为它的用法。如果有人可以提供解释,我会将其标记为答案。
如果 visitEntryToAdd.RoomProfile
在映射之前为 null,则实际上是在说 ko.mapping.fromJS(data, {}, null)
并且没有任何内容将新映射的数据绑定到视图模型。
您可以通过将访问条目上的 RoomProfile
初始化为 {}
而不是 null
或执行映射来解决此问题:
ko.mapping.fromJS({RoomProfile: data}, {}, visitEntryToAdd);
这种映射将从视图模型的根开始,并且其上的 RoomProfile
字段是可分配的。如果将字段初始化为 {}
有意义,它将起作用,因为视图模型上的 RoomProfile
字段未被替换,仅更新其上的字段,因此来自 visitEntryToAdd 的 link -> RoomProfile 被保留。
我有我的根剔除模型,它包含一个 VisitEntries 集合,每个条目都有一个名为 RoomProfile 的对象。当用户创建访问条目(将房间添加到他们的访问列表)时,房间的配置文件数据应该加载并显示给该集合内的用户。但我无法更新关联模型。我以前在其他领域做过这个没问题。我认为存在问题,因为我正在我的根 mappedModel
上制作 VisitEntryToAdd
的副本,或者因为它在一个集合中。我不确定,但这是我与其他时候唯一不同的地方。
mappedModel.addVisitEntry = function () {
var visitEntryToAdd = ko.mapping.fromJS(ko.mapping.toJS(mappedModel.VisitEntryToAdd));
$.ajax({
url: '/GetRoomProfileForVisit',
type: 'POST',
data: ko.mapping.toJSON({ Id: visitEntryToAdd.SelectedRoom.Id() }),
dataType: "json",
contentType: 'application/json; charset=utf-8',
success: function (data) {
if (data !== null) {
console.log("Checking entry before assigning room profile data: \n" + ko.mapping.toJSON(visitEntryToAdd));
console.log("Room Profile Data Loaded:\n" + ko.mapping.toJSON(data));
ko.mapping.fromJS(data, {}, visitEntryToAdd.RoomProfile);
console.log("Checking entry after assigning room profile data: \n" + ko.mapping.toJSON(visitEntryToAdd));
}
mappedModel.VisitEntries.push(visitEntryToAdd);
}
});
}
通过上面的代码:
首先 console.log 显示 visitEntryToAdd
具有所有正确的字段,包括 RoomProfile
,它在我添加房间配置文件数据之前设置为空。
第二个 console.log 确认我的 ajax 方法处理了 return 数据并且其格式正确。
第三个 console.log 显示相同的 visitEntryToAdd
,并且其上的 RoomProfile
仍然为空。
我可以通过以下方式实现此功能:
visitEntryToAdd.RoomProfile(ko.mapping.fromJS(data));
但我不确定为什么仅使用 fromJS
命令它不起作用,因为它的用法。如果有人可以提供解释,我会将其标记为答案。
如果 visitEntryToAdd.RoomProfile
在映射之前为 null,则实际上是在说 ko.mapping.fromJS(data, {}, null)
并且没有任何内容将新映射的数据绑定到视图模型。
您可以通过将访问条目上的 RoomProfile
初始化为 {}
而不是 null
或执行映射来解决此问题:
ko.mapping.fromJS({RoomProfile: data}, {}, visitEntryToAdd);
这种映射将从视图模型的根开始,并且其上的 RoomProfile
字段是可分配的。如果将字段初始化为 {}
有意义,它将起作用,因为视图模型上的 RoomProfile
字段未被替换,仅更新其上的字段,因此来自 visitEntryToAdd 的 link -> RoomProfile 被保留。