2

監視可能な配列を持つネストされたビューモデルがいくつかあり、ネストされた配列のいずれにも正常に追加できません。トップレベルでの追加は正常に機能します。私は自分が間違っていることのトラブルシューティングを試みるためにたくさんの読書といじりをしましたが、役に立たなかった。

階層は次のとおりです。キュー->ファイル->クレーム->行

新しいファイルをキューに追加できますが、新しいクレームを追加できません（ファイルおよびキューを介して試行）

私が間違っていることについて何か考えはありますか？ 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()は、オブザーバブルで構成されていません。つまり、最初のqueue.files監視可能な配列には、ビューモデルのインスタンスではなく、生の JS オブジェクトが含まれますFile。

  • 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 に答える