1

Ajaxを介して返されたJSオブジェクトから動的ビューモデルをどのように構築しますか？

監視可能なオブジェクトと監視可能な配列を作成する場合、取得のたびにバインドされない限り、ビューにはデータが含まれず、アラートが複数回バインドされます。

私のJS

var SummaryData = {
  Summary: {
    Count: 4
  }
};

var DetailsData = {
  Status: [{
    Name: "One",
    Type: 1
  }, {
    Name: "Two",
    Type: 1
  }, {
    Name: "Three",
    Type: 0,
    Taco: "True"
  }]
};
var self = this;
self.Summary = new ko.observableArray([]);
self.Details = ko.observable();
self.Load = function () {

$.ajax({
      url: "/echo/json/",
      data: SummaryData,
      type: "GET",
      success: function (data) {
        // Map the returned JSON to the View Model  
        self.Summary = ko.mapping.fromJS(data.Summary);
      }
})
$.ajax({
      url: "/echo/json/",
      data: DetailsData,
      type: "GET",
      success: function (data) {
        // Map the returned JSON to the View Model  
        self.Details = ko.mapping.fromJS(data.Status);
      }
})

私のHTML：

<span data-bind="text: Summary.Count"></span>
<table data-bind="foreach: Details">
    <tr>
        <td data-bind="text: Name"></td>
        <td><button data-bind="click: $root.Clicked"></button></td>
    </tr>
</table>

http://jsfiddle.net/atwoodkevin/q8EKP/40/

4

1 に答える 1

1

重要なのは、オブザーバブルを初期化し、オブザーバブルにnull以外の値が設定されるまで子要素をバインドしないバインディング（、、、など）withをif慎重に使用することです。foreachAJAXを介してデータを取得するときに、再定義するのではなく、（（）フォームを使用して）オブザーバブルを設定します。ストレート配列（つまり、オブジェクトに埋め込まれていない）のマッピングは、わずかに異なる方法で処理できますko.mapping。空の配列で呼び出してから、でマッピングを更新することで初期化されます。ko.mapping.fromJS(data.Status, self.Details)

他の2つのポイント：

View.Load()それを渡すのでko.applyBindings、そのメソッドからViewModelを返す必要があります。

ClickedハンドラーはViewModel内にある必要があります。

-

これが機能しているフィドルです：http：//jsfiddle.net/jearles/q8EKP/43/

于 2013-01-16T12:27:17.920 に答える