Knockout Observable Array添加元素后值异常问题求助

问题根源 #

你遇到的问题其实是对象引用复用导致的：你一直用同一个myObjectIAmPushing对象，每次push到数组里的都是这个对象的引用。当你清空item1和item2并重新赋值时，数组里所有指向这个对象的引用都会同步变化，所以最后数组里的元素全变成了同一个值。

更优的实现方式 #

核心思路是：每次添加时都创建一个全新的对象实例，而不是复用同一个对象。这里有几种简洁的实现方式：

方式1：使用构造函数创建带Observable的对象

先定义一个构造函数，专门生成包含observable属性的对象，每次添加时new一个新实例：

var self = this;
self.myArrayIwanttoAddTo = ko.observableArray([]);

// 定义构造函数，生成带observable属性的对象
function Item(item1Val = "", item2Val = "") {
    this.item1 = ko.observable(item1Val);
    this.item2 = ko.observable(item2Val);
}

self.AddItemToUpdate = function(data) {
    // 基于传入的数据创建新的Item实例
    self.myArrayIwanttoAddTo.push(new Item(data.item1(), data.item2()));
};

self.AddMyData = function() {
    // 假设你有绑定的输入框，直接取当前值创建新对象
    const newItem = new Item(self.inputItem1(), self.inputItem2());
    self.myArrayIwanttoAddTo.push(newItem);
    // 清空输入框（如果有的话）
    self.inputItem1("");
    self.inputItem2("");
};

方式2：直接在添加时创建新对象（无需构造函数）

如果不需要复用构造函数，也可以在添加逻辑里直接生成新的observable对象：

var self = this;
self.myArrayIwanttoAddTo = ko.observableArray([]);

self.AddItemToUpdate = function(data) {
    // 把传入的data的observable值取出，创建新的observable对象
    self.myArrayIwanttoAddTo.push({
        item1: ko.observable(data.item1()),
        item2: ko.observable(data.item2())
    });
};

self.AddMyData = function() {
    self.AddItemToUpdate(self.myObjectIAmPushing);
    // 清空临时对象的属性
    self.myObjectIAmPushing.item1("");
    self.myObjectIAmPushing.item2("");
};

对你现有代码的点评 #

你当前的代码是可行的，但可以简化：

• 不需要先转成ko.toJS再重新构造，直接获取observable的当前值即可
• 不需要重复创建myObjecttoPush实例（你现在new myObjecttoPush(items.item1, items.item2)其实是多此一举，因为items已经是实例了）

简化后的版本可以是：

self.AddItemToUpdate = function(data){
    function myObjecttoPush(item1,item2){
        this.item1 = ko.observable(item1); // 建议把属性改成observable，方便后续双向绑定
        this.item2 = ko.observable(item2);
    }
    // 直接取data里observable的当前值，创建新实例
    self.myArrayIwanttoAddTo.push(new myObjecttoPush(data.item1(), data.item2()));
};

这样既保留了你的构造函数思路，又减少了冗余步骤，同时确保每次添加的都是独立的对象实例，不会出现引用覆盖的问题。

内容的提问来源于stack exchange，提问作者Leonardo Wildt