Javascript 当用户提交时在ObservalArray中更新记录,而不是自动使用KnockoutJS
我有一个在网格中渲染的可观察阵列。当用户单击一行时,会弹出一个对话框表单,用户可以编辑所选项目。我想让用户能够更新或取消他们的更改,但由于所选记录是可观察的,所以更改会立即进行 如何将所选记录与ObservalArray分离,以便仅在用户单击“更新”时更新数据 这是我的问题的简化版本-我的Javascript 当用户提交时在ObservalArray中更新记录,而不是自动使用KnockoutJS,javascript,knockout.js,Javascript,Knockout.js,我有一个在网格中渲染的可观察阵列。当用户单击一行时,会弹出一个对话框表单,用户可以编辑所选项目。我想让用户能够更新或取消他们的更改,但由于所选记录是可观察的,所以更改会立即进行 如何将所选记录与ObservalArray分离,以便仅在用户单击“更新”时更新数据 这是我的问题的简化版本-我的 我认为您的结构与我在上面评论中链接的文章中描述的编辑器模式类型非常匹配: 对于您的数据,这意味着跟踪selectedItem和selectedItemForEditing,后者是使用所选项目的数据创建的新位置
我认为您的结构与我在上面评论中链接的文章中描述的编辑器模式类型非常匹配: 对于您的数据,这意味着跟踪selectedItem和selectedItemForEditing,后者是使用所选项目的数据创建的新位置 如果用户取消,那么您可以将其丢弃。如果用户接受,则可以获取已编辑项的数据并将其应用于原始选定项 本文描述了用数据填充观察对象来分离观察对象的创建,以便始终可以使用干净的数据调用更新方法
以下是您使用这些技术更新的小提琴:我认为您的结构与我在上面评论中链接的文章中描述的编辑器模式非常匹配: 对于您的数据,这意味着跟踪selectedItem和selectedItemForEditing,后者是使用所选项目的数据创建的新位置 如果用户取消,那么您可以将其丢弃。如果用户接受,则可以获取已编辑项的数据并将其应用于原始选定项 本文描述了用数据填充观察对象来分离观察对象的创建,以便始终可以使用干净的数据调用更新方法
以下是您使用这些技术更新的小提琴:您应该了解,您选择的可观察位置将包含实际位置项,您所做的所有编辑都将反映在同一实例上。这是因为JS中的对象是通过引用分配的,而不是通过值分配的。阅读这里的编辑器模式实现:您应该了解您的selectedLocation observable将包含实际位置项,并且您所做的所有编辑都将反映在同一个实例上。这是因为JS中的对象是通过引用分配的,而不是通过值分配的。在这里阅读编辑器模式实现:太棒了!再次感谢,Ryan如果类型数组超出了Location对象的范围,该怎么办。如何使用适当的名称更新type属性?我个人会这样做。这简化了一些事情,并确保我们总是处理对同一类型对象的引用。我没有使用optionsValue绑定,所以它只是将类型设置为对象。太棒了!再次感谢,Ryan如果类型数组超出了Location对象的范围,该怎么办。如何使用适当的名称更新type属性?我个人会这样做。这简化了一些事情,并确保我们总是处理对同一类型对象的引用。我没有使用optionsValue绑定,所以它只是将类型设置为对象。
function Type(data) {
this.id = data.id;
this.name = ko.observable(data.name);
};
function Location(data) {
this.id = data.id;
this.name = ko.observable(data.name);
this.state = ko.observable(data.state);
this.headline = ko.observable(data.headline);
this.type = ko.observable(new Type(data.type));
};
function ViewModel() {
var self = this;
self.types = types;
self.locations = ko.observableArray(ko.utils.arrayMap(seedData, function(item) {
return new Location(item);
}));
self.selectedLocation = ko.observable();
self.edit = function(item) {
self.selectedLocation(item);
};
self.cancel = function() {
self.selectedLocation(null);
};
self.update = function(item) {
//do something here to push updated Location to locations observableArray
};
}