2

我有一些带有可观察数组的嵌套视图模型，并且无法成功添加到任何嵌套数组中。在顶层添加工作正常。我做了很多阅读和摆弄，试图解决我做错的事情，但无济于事。

层次结构如下：Queue-->Files-->Claims-->Lines

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

任何想法我做错了什么？ 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));
});

​</p>

4

3 回答 3

3

我快速检查了您的 jsfiddle，发现存在一些问题，例如：

  • 您传递给Queue()构造函数的初始数据不是由 observables 组成的。换句话说，初始的queue.filesobservable 数组包含原始的 JS 对象，而不是你的Fileviewmodel 的实例。

  • data-bind="click: File.addClaim"不做你想让它做的事情。应该是data-bind="click: addClaim"，但首先您的queue.files数组必须由File实例组成。

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

于 2012-06-20T23:03:12.117 回答
1

你的问题很简单。您的 File、Claim 等构造函数非常棒，只是您从未使用过它们。例如，您将原始 json 推送到您的收藏中。

this.files.push(file2);

真的应该

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

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

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

希望这可以帮助。

于 2012-06-20T23:04:41.067 回答
0

此外，通过手动映射数据模型对代码进行另一次清理

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

于 2012-06-20T23:24:17.793 回答