2

毛を抜いています!! 私はすべての例、チュートリアルなどを読みました。他の人はこれを非常に簡単にしているように見えますが、私は Knockout が初めてで、これを機能させることができません。

jquery ajaxリクエストから値をバインドしたいユーザープロファイルフォームがあります。基本的に、サーバーからプロファイルを取得し、以前に保存したデータをフォームの値にロードできるようにしたいと考えています。マッピング プラグインを使用して、API から JSON を要求し、値をフォームに読み込むことができます (データベースにプロファイルを事前に入力しました)。

$.getJSON("api/profile/" + "<?php echo $_SESSION['id']; ?>",function(json){

    var viewModel = ko.mapping.fromJS(json);     
    ko.applyBindings(viewModel);  

});

これはうまくいきます。私が抱えている問題は投稿側にあります。ユーザーが初めてフォームに入力して保存ボタンをクリックすると、すべての値が JSON でサーバーにポストバックされますが、1 つのフィールドのみを変更してから再度保存すると、変更された値のみがポストされ、他のすべての値はnullとして投稿されます

私が使用しているビューモデル (ko.observalbe()、「」値などでこれを試しました!)

viewModel ={}

ここに私の保存呼び出しがあります:

viewModel.save = function(){

              $.ajax({
                   url:"api/profile/" + "<?php echo $_SESSION['id']; ?>",
                   contentType: 'application/json',
                   data: ko.mapping.toJSON(viewModel),
                   type: "POST",
                   dataType: 'json',
                   success: function(data) {

                        alert("What's UP!");

                        alert(data)

                    },
                    error: function (data) { alert("error" + data); }
                    });
        }

保存の「データ」行と、ノックアウトが値にバインドする方法に関係していることは知っていますが、私の人生ではそれを理解することはできません. どんな援助でも大歓迎です！

これは、検索する人にとって最終的に機能する最終的なコードです。

<script type="text/javascript">

        var viewModel;

        function callback(data) {
            if (viewModel) {
                // model was initialized, update it
                ko.mapping.fromJS(data, viewModel); 
            } else {
                // or initialize and bind
                viewModel = ko.mapping.fromJS(data);
                ko.applyBindings(viewModel);
            }
        }

    save = function() {

             $.ajax({
                    url:"api/profile/" + "<?php echo $_SESSION['id']; ?>",
                    contentType: 'application/json',
                    data: ko.mapping.toJSON(viewModel),
                    type: "POST",
                    dataType: 'json',
                    success: function(data) {

                   alert( ko.mapping.toJSON(viewModel));    
                    },
                    error: function (data) { alert("error" + data); }
                    });
        }        


    $.ajax({
                url: "api/profile/" + "<?php echo $_SESSION['id']; ?>",
                contentType: 'application/json',
                type: "GET",
                dataType: 'json',
                success: function(data) {
                 callback(data);         


                }       
        });


  </script>
4

1 に答える 1

3

ノックアウト マッピング プラグインを使用する場合、常に変数を作成し (グローバルまたは任意のアプリケーション名前空間にすることができます)、モデルを 1 回だけ初期化し、残りのすべての ajax 要求はモデルを更新するだけです。おそらく、更新ステップが欠落しています。

以下にコードを示します (もちろん、JavaScript コードは単純化されています)。

var model; // it is undefined, I just need to have the way to find whether the model was initialized or not
function callback(data) {
    if (model) {
        // model was initialized, update it
        ko.mapping.fromJS(data, model); 
    } else {
        // or initialize and bind
        model = ko.mapping.fromJS(data);
        ko.applyBindings(model);
    }
}

// do ajax request and call callback(data) on success callback

問題の解決に役立ちましたか？

于 2012-07-27T15:15:14.547 に答える