阵列之间的Knockout引用/值复制

时间:2014-11-25 11:55:48

标签: arrays knockout.js

谁能看到我在这里做错了什么?

var card = function (item, groupMembers, removeCallback) {
    ...
    self.members = ko.observableArray(assignMembers(item.Members));
    ...
    function assignMembers(members) {
        var memberList = [];
        if (groupMembers !== "undefined" && groupMembers !== null) {
            //memberList = groupMembers.slice(0); // copy of group member list
            // control check to make sure we copied groupMembers correctly
            ko.utils.arrayForEach(groupMembers, function (member) {
                memberList.push(new member({ UserId: member.id, Name: member.name, Avatar: member.avatar }));
                console.log('Member: ', member.id, ' Checked: ', member.isChecked());
            });

            if (members !== "" && members !== null) {
                var memberIdList = members.split(',');
                ko.utils.arrayForEach(memberList, function (member) {
                    ko.utils.arrayForEach(memberIdList, function (memberId) {
                        if (member.id === parseInt(memberId, 10)) {
                            member.isChecked(true);
                            // print members that matched
                            console.log('Card: ', item.CardId, ' Member: ', member.id, ' Checked: ', member.isChecked());
                        }
                    });
                });
            }

            // control check to make sure things were assigned correctly
            ko.utils.arrayForEach(memberList, function (member) {
                console.log('Member: ', member.id, ' Checked: ', member.isChecked());
            });
            console.log(''); // spacer
            return memberList;
        }
        return memberList;
    }
    ...
}

在大多数情况下,我试图制作传递给此模型的groupMembers数组的副本(值副本)。原因在于功能的中间。我正在检查以逗号分隔的引用列表,这些引用也已传递到此模型中,以标记先前分配给此卡的成员。

我尝试过几个选项

memberList = groupMembers;
memberList = groupMembers.slice(0);

所有导致我认为是参考副本。这意味着当我对memberList数组进行更改时,它实际上会更改groupMembers这是不好的。

因此,如果您想象这是为每个实例化的卡完成的。控制台窗口中的结果如下所示:

// Card #1: initial memberList data
Member: 2 Checked: false
Member: 3 Checked: false
Member: 4 Checked: false
Member: 6 Checked: false

// Card #1: middle assignment
Card: 1004 Member: 3 Checked: true
Card: 1004 Member: 4 Checked: true

// Card #1: final memberList check
Member: 2 Checked: false
Member: 3 Checked: true
Member: 4 Checked: true
Member: 6 Checked: false

第一张卡没有probs。

// Card #2: initial memberList data
Member: 2 Checked: false
Member: 3 Checked: true
Member: 4 Checked: true
Member: 6 Checked: false

// Card #2: final memberList check
Member: 2 Checked: false
Member: 3 Checked: true
Member: 4 Checked: true
Member: 6 Checked: false

然而,第二张卡片证明代码正在处理之前的结果。

// Card #3: initial memberList data
Member: 2 Checked: false
Member: 3 Checked: true
Member: 4 Checked: true
Member: 6 Checked: false

// Card #3: final memberList check
Member: 2 Checked: false
Member: 3 Checked: true
Member: 4 Checked: true
Member: 6 Checked: false

第三张同样的故事。

// Card #4: initial memberList data
Member: 2 Checked: false
Member: 3 Checked: true
Member: 4 Checked: true
Member: 6 Checked: false

// Card #4: middle assignment
Card: 1002 Member: 2 Checked: true
Card: 1002 Member: 6 Checked: true

// Card #4: final memberList check
Member: 2 Checked: true
Member: 3 Checked: true
Member: 4 Checked: true
Member: 6 Checked: true

第四张牌没有什么不同,但这次我们必须检查有2个和6个参考的成员。

// Card #5: initial memberList data
Member: 2 Checked: true
Member: 3 Checked: true
Member: 4 Checked: true
Member: 6 Checked: true

// Card #5: middle assignment
Card: 1003 Member: 6 Checked: true

// Card #5: final memberList check
Member: 2 Checked: true
Member: 3 Checked: true
Member: 4 Checked: true
Member: 6 Checked: true

正如你所看不到我所追求的结果。因此价值复制。

尽管我付出了最大的努力,但我还是试图通过手动重新创建阵列来迎接:

TypeError: member is not a constructor
memberList.push(new member({UserId:member.id,Name:member.name,Avatar:member.avat...

错误。

谁能看到我在这里做错了什么?

更新

更新了我开始工作的fiddler

你会注意到groupMembers实际上没有被正确传递,因为我的代码现在看起来不同了,我正在努力解决这个问题。对不起。

更新

我已经将它转换了一点。但它一直在咬我的耐心fiddler

1 个答案:

答案 0 :(得分:1)

如果你的意图只是深层复制数据,我会选择类似下面的例子

var jsonString = JSON.stringify(myModel);
var copiedData = JSON.parse(jsonString);