Question

我有一些带有可观察数组的嵌套视图模型，无法成功添加到任何嵌套数组。在顶级添加工作正常。我已经做了大量的阅读和摆弄，试图解决我做错了什么但无济于事。

层次结构如下：队列 - ＆GT;文件 - ＆GT;宣称 - ＆GT;线

我可以将新文件添加到队列中但我无法添加新的声明（通过文件和通过队列尝试）

任何想法我做错了什么？ http://jsfiddle.net/bxfXd/254/

更新：以下所有答案都指出了核心问题 - 在我的可观察数组中使用原始数据而不是实例化模型。更新了工作代码：http://jsfiddle.net/7cDmg/1/

HTML ：

<h2>
    <span data-bind="text: name"></span>        
    <a href='javascript:' data-bind="click: addFile">AddFile</a>
</h2>
<div data-bind="foreach: files">
    <h3>File: <span data-bind="text: name"></span> (<span data-bind="text: id"></span>)
    <a href='javascript:' data-bind="click: $data.addClaim">AddClaimViaFile</a>
    <a href='javascript:' data-bind="click: $root.addClaim">AddClaimViaQueue</a></h3> 

    <div data-bind='foreach: claims'>
        <h3 data-bind="text: ud"></h3> 
        <table border=1>
            <thead>
                <td>id</td>    <td>procedure</td>    <td>charge</td>
            </thead>
            <tbody  data-bind='foreach: lines'>
                <tr>
                    <td data-bind="text: id"></td> 
                    <td data-bind="text: procedure"></td> 
                    <td data-bind="text: charge"></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

的JavaScript ：

var line1 = { id: 1, procedure: "Amputate", charge: 50 };
var line2 = { id: 2, procedure: "Bandage", charge: 10};
var claim1 = { ud: '1234E123', charge: 123.50, lines: [line1,line2] };
var claim2 = { ud: '1234E222', charge: 333.51, lines: [line2,line2] };
var file1 = { id: 1, name: "Test1.txt", claims: [claim2] };
var file2 = { id: 2, name: "Test2.txt", claims: [] };
var queue = { id: 1, name: "JoesQueue", files: [file1,file2] }; 


function Line(data) {
    this.id = ko.observable(data.id);
    this.procedure = ko.observable(data.procedure);
    this.charge = ko.observable(data.charge);
}

function Claim(data) {
    this.ud = ko.observable(data.ud);
    this.charge = ko.observable(data.charge);
    this.lines = ko.observableArray(data.lines);
}

function File(data) {
    var self=this;
    self.id = ko.observable(data.id);
    self.name = ko.observable(data.name);
    self.claims = ko.observableArray(data.claims);
    self.addClaim = function(file) {  //this never gets called.. Why?
        alert("File.addClaims");
       self.claims.push(claim1);
    }          
}

function Queue(data) {
    this.id = ko.observable(data.id);
    this.name = ko.observable(data.name);
    this.files = ko.observableArray(data.files);
    this.addClaim = function(file) {
        alert("Queue.addClaim");
        console.log(file);
       file.claims.push(claim1); //This line gets hit, but no claims get added..Why?
    };     
    this.addFile = function() {
        alert("Queue.addFile");
        this.files.push(file2); //Works - adding seems to only work at the top level :(
    }
}

$(function () {
    ko.applyBindings(new Queue(queue));
});

Answer 1

我很快检查了你的jsfiddle，我发现有一些问题，如：

传递给Queue()构造函数的初始数据不是由observable构成的。换句话说，初始queue.files可观察数组包含原始JS对象，而不包含File视图模型的实例。
data-bind="click: File.addClaim"没有做你想做的事。它应该是data-bind="click: addClaim"，但首先您的queue.files数组必须包含File个实例。

我在这个jsfiddle中解决了这些问题：http://jsfiddle.net/ntXJJ/2/（从你的分叉）。

Answer 2

你的问题很简单。你的文件，索赔等的构造函数很棒，除非你从未使用它们。例如，您正在将原始json推送到您的集合中。

this.files.push(file2);

应该是

this.files.push(new File(file2));

您还没有正确初始化对象。这是一个演示如何使用映射插件的小提琴。

http://jsfiddle.net/madcapnmckay/a8mZY/1/

希望这有帮助。

Answer 3

此外，通过手动映射数据模型

再次清理代码

http://jsfiddle.net/keith_nicholas/d64TN/

Knockout：在嵌套ViewModels中添加可观察数组

3 个答案: