Knockout.js ko.mapping.toJS がビュー内のデータを更新しない

Question

サーバーから json オブジェクトを取得し、ビューにデータを追加します。次に、データを変更してサーバーにプッシュします。次に、変更があればビューが更新されることを期待して、データの新しいコピーを取得します。しかし、そんなことは起こりません。TIA

$(document).ready(function() {
    var customer_id = get_customer_id();
    var data = load_model();
    contract_model = ko.mapping.fromJS(data,{});
    ko.applyBindings(contract_model);
}

function load_model(){
    var url = '/ar/contract_json?contract_id='+get_contract_id();
    var data = '';
    $.ajax({
        type:'GET',
        url:url,
        async:false,
        success: function(returningValue){
            data = returningValue;
        }
    });
    return data;
}

この初期ロードは正常に機能します。次に、いくつかの作業を行って、オブザーバブルの 1 つを変更し、そのデータをサーバーにプッシュします。サーバーが更新を取得し、ビューが更新されるようにデータの新しいフェッチを実行します（ワンステップで新しいデータを戻すことができることはわかっていますが、コードではこれをまだリファクタリングしていません）。

function refresh_data(contract_model){
    var url = '/ar/contract_json?contract_id='+get_contract_id();
    $.post(url,function(data){
        console.log(data);
        ko.mapping.fromJS(contract_model,{},data);
        ko.applyBindings(contract_model);
        console.log(ko.mapping.toJS(contract_model))
    });

}

function refresh_data(contract_model){
    var url = '/ar/contract_json?contract_id='+get_contract_id();
    $.post(url,function(data){
        console.log(data);
        ko.mapping.fromJS(contract_model,{},data);
        console.log(ko.mapping.toJS(contract_model))
    });

}

function push_model(contract_model,refresh){
    var url = '/ar/update_contract';
    var data = {'contract':ko.mapping.toJSON(contract_model)}

    delete data['lines'];
    $.post(url,data,function(return_value){
        if (refresh){
            refresh_data(contract_model);
        };
    });
}

コンソール メッセージにはすべて、新しいデータが戻ってくることが示されていますが、ビューが更新されません。

Answer 1

問題は、に渡すパラメータの順序にある​​と思います。 ko.mapping.fromJS アップデート時の機能 contract_model.

あなたが持っている：

ko.mapping.fromJS(contract_model,{},data);

あなたが欲しい：

ko.mapping.fromJS(data, {}, contract_model);

Answer 2

@seth.millerの答えは正しいです。あなたの場合、中央の「オプション」パラメーターを除外することもできます contract_model 以前にマッピングされたものと同じです。引数が2つしかない場合、 ko.mapping.fromJS 2番目の引数にを持っているかどうかを確認します "__ko_mapping__" 財産。もしそうなら、それをターゲットとして扱い、それ以外の場合はそれをオプションオブジェクトとして扱います。

Answer 3

@dbuenoの観察に基づいて - TypeScriptを使用している人のために、このメソッドの署名をあなたからコメントすることを強くお勧めします knockout.mapping.d.ts ファイル。

// fromJS(jsObject: any, targetOrOptions: any): any;

はい - コメントしてください。

その後、実行しようとすると、コンパイル時間エラーが表示されます。

ko.mapping.fromJS(item.data, item.target);

そして、あなたはそれをはるかに安全なものに置き換えることができます

ko.mapping.fromJS(item.data, {}, item.target);

より安全だからです item.target 以前にマッピングされています（そしてそのため、 __ko_mapping__ プロパティ）は常にプロパティをコピーします。