点击模态框取消后，如何刷新observableArray至初始值？

我太懂这个坑了！你明明点了取消想放弃修改，结果下次打开模态框，改了的内容还躺在那儿——问题根源其实出在你存初始数据的方式上，咱一步步来解决：

为什么你的初始备份没用？ #

如果只是把observableArray直接转成普通数组（比如var initialData = myObservableArray()），这属于浅拷贝：数组里的每个对象和原observableArray里的对象是同一个引用。用户在List控件里修改的是对象的属性，这些修改会直接同步到你存的“初始数据”里，所以重新赋值自然看不到变化。

正确的解决步骤 #

1. 深拷贝初始数据，彻底隔离引用 #

你需要把原始的List数据做深拷贝，让初始备份和模态框里的数据完全独立。如果是简单的JSON结构（没有函数、循环引用），用JSON序列化的方式最方便：

// 假设这是你从后端拿到的原始初始数据
var originalListData = [{name: "商品A", quantity: 10}, {name: "商品B", quantity: 20}];
// 深拷贝存成干净的备份
var initialDataBackup = JSON.parse(JSON.stringify(originalListData));
// 初始化你的observableArray
self.modalList = ko.observableArray(initialDataBackup);

如果数据里有函数或者复杂对象，JSON方式不好使的话，可以用递归深拷贝或者Lodash的_.cloneDeep工具函数。

2. 打开/取消模态框时重置数据 #

建议在打开模态框的函数里重置数据（比取消时重置更稳妥，避免用户多次打开累积问题）：

self.openModal = function() {
    // 每次打开都生成一份全新的干净数据
    var freshListData = JSON.parse(JSON.stringify(initialDataBackup));
    // 替换掉observableArray里的旧数据
    self.modalList(freshListData);
    // 打开模态框
    $('#yourModal').modal('show');
};

要是你习惯在取消按钮里处理，也可以这么写：

self.cancelModal = function() {
    // 清空现有数据，再塞入干净的备份
    self.modalList.removeAll();
    var freshListData = JSON.parse(JSON.stringify(initialDataBackup));
    self.modalList(freshListData);
    // 关闭模态框
    $('#yourModal').modal('hide');
};

3. 特殊情况：如果List项是Observable对象 #

要是你的List项里的属性用了ko.observable()（比如{name: ko.observable("商品A"), quantity: ko.observable(10)}），备份和重置时要注意转换：

// 备份时把Observable转成普通值
var initialDataBackup = self.modalList().map(function(item) {
    return {
        name: item.name(),
        quantity: item.quantity()
    };
});

// 重置时再转回Observable对象
self.modalList(initialDataBackup.map(function(item) {
    return {
        name: ko.observable(item.name),
        quantity: ko.observable(item.quantity)
    };
}));

核心总结 #

只要保证初始备份和模态框内的数据没有共享对象引用，修改模态框内容就不会污染原始数据，取消或重新打开时自然能恢复到初始状态啦～

内容的提问来源于stack exchange，提问作者Anup Amin