knockoutjs：克隆 observableArray-Object

Question

我想在一个 knockoutjs observableArray 中克隆/（深度）复制一个项目。

我在网上找不到有关此问题的任何信息。每个人都想克隆洞数组；）

这里是 jsfiddle： http://jsfiddle.net/drchef/dCHMC/1/

你可以看到，我正在使用我在 SO 上找到的 deepcopy 方法。

this.cloneLine = function() {
    //This 2 lines is what i found on SO. Should work, but doesn not :(
    //cloning the second line (sry hardcoded...)
    var lastLine = this.lines()[1];
    this.lines.push(jQuery.extend(true, {}, lastLine));
};

在视图模型输出中，您可以看到副本正在运行……但在内部，新项目和克隆项目的引用仍然是相同的值。 如果您在新行中更改了一个值，则它也会在原始行中更改。

背景： 我有一个输入网格，如果用户在最后一行并在想要一个新行 + 最后一行的相同数据中点击“输入”

我不想编写一个方法或某个女巫正在克隆每一个数据的东西。在虚拟机的每次更改中，我都必须更新映射。 ;(

谢谢

Answer 1

您需要在 Line 视图模型中解开可观察对象。您可以使用ko.toJS 实用程序方法执行此操作。 Demo

function Line(line) {
    this.a = ko.observable(line && line.a);
    this.b = ko.observable(line && line.b);
    this.c = ko.observable(line && line.c);
};

var ViewModel = function() {
    var self = this;

    this.lines = ko.observableArray([]); 

    this.cloneLine = function(line) {
        var l = new Line(ko.toJS(line));
        self.lines.push(l);
    };

    this.cloneLastLine = function() {
        var lines = self.lines(),
            line = lines[lines.length - 1];
        self.cloneLine(line);
    };
}

var model = new ViewModel();

//Initial Data
model.lines.push(new Line({ a: 0, b: 1, c: 2}));
model.lines.push(new Line({ a: 2, b: 1, c: 0}));

ko.applyBindings(model);

Answer 2

要在 Knockout 中制作具有不同引用的副本，您确实需要创建一个副本……从字面上看。使用您的方法，您永远不会真正打破现有淘汰赛绑定的任何链条。正如您将在下面的小提琴更新中看到的那样，您需要将“lastLine”拖放到一个平面 JS 对象，然后创建一个新的“line”对象并将其传递到您的 observable 数组中。

http://jsfiddle.net/dCHMC/2/

this.cloneLine = function() {
    var lastLine = ko.toJS(this.lines()[1]);
    this.lines.push(new line(lastLine.a, lastLine.b, lastLine.c));
};