web-dev-qa-db-ja.com

knockoutjs-ko.mapping.fromJSが機能しない

私はknockout.jsを試し始めたところです。 ko.mappingは、サーバーからデータを取得してマップするための優れた方法を提供します。ただし、マッピングを機能させることができません。

私は単純なモデルを持っています：

//var helloWorldModel;
var helloWorldModel = {
    name: ko.observable('Default Name'),
    message: ko.observable('Hello World Default')
};


$(document).ready(function() {
  ko.applyBindings(helloWorldModel);
      //a button on the form when clicked calls a server class 
      //to get json output
  $('#CallServerButton').click(getDataFromServer);
});

function getDataFromServer() {
  $.getJSON("HelloSpring/SayJsonHello/chicken.json", function(data) { 
    mapServerData(data);
  });
}

function mapServerData(serverData) {
  helloWorldModel = ko.mapping.fromJS(serverData, helloWorldModel);
  alert(JSON.stringify(serverData));
}

HelloWorldModelには2つの属性しかありません。サーバーから返すものとまったく同じです。 mapServerDataのアラートは次のことを示しています-

{"name":"chicken","message":"JSON hello world"}

同様の問題について他の投稿を調べましたが、どれもこの問題を解決していないようです。多分私は非常に基本的な何かを見逃しています-誰かがそれを指摘できるかどうか疑問に思います。

モデルを事前に宣言して使用しない場合にも注意してください

 helloWorldModel = ko.mapping.fromJS(serverData);

データをフォームに正しくマッピングしています。

javascriptknockout.jsknockout-mapping-plugin
10
6ton

リチャードの返事とこれについてのもう少しの調査から、私がモデルを初期化した方法は間違っていると思います。既存のビューモデルを使用して、マッパープラグインで動作することを期待することはできないと思います。したがって、代わりに、ko.mapping.fromJSを使用して生のJSONデータでビューモデルを初期化します。

var helloWorldModel;

$(document).ready(function() {
  var defaultData = {
      name: 'Default Name',
      message: 'Hello World Default'
  };

  helloWorldModel = ko.mapping.fromJS(defaultData);
  ko.applyBindings(helloWorldModel);
  $('#CallServerButton').click(getDataFromServer);
});

function getDataFromServer() {
  $.getJSON("HelloSpring/SayJsonHello/chicken.json", function(data) { 
    mapServerData(data);
  });
}

function mapServerData(serverData) {
  alert(JSON.stringify(serverData));
  ko.mapping.fromJS(serverData, helloWorldModel);
}

このコードは機能し、期待される動作を提供します

21
6ton

この方法でモデルを再割り当てして、モデルを上書きすることはできません。

あなたがするとき：

ko.applyBindings(helloWorldModel);

「モデルhelloWorldModelをページにバインドする」と言っています。次に、ノックアウトが通過し、そのモデルのオブザーバブルを接続して、ページにバインドします。

ここでフォームモデルを上書きすると、次のようになります。

helloWorldModel = ko.mapping.fromJS(serverData, helloWorldModel);

モデルオブジェクトを、まったく新しいオブザーバブルを含むまったく新しいオブジェクトで上書きしています。

これを修正するには、この行を次のように変更する必要があります。

ko.mapping.fromJS(serverData, helloWorldModel);

これにより、モデル内のプロパティが処理され、モデルを上書きすることなく再割り当てされます。

14
Richard Rout