2

WCF サービスから json データを受信して​​おり、それをビューモデルにマップしたいと考えています。

JSON データ:

  {"bios" :
        { "Caption" : "something",
          "Version": "something else",
           ....
        }
    }

私のHTML部分は次のとおりです。

<ul class="biosContentUL">
              <li class="biosContentLI">
                  <p>
                     <b>Caption: </b><span data-bind="text: bios.Caption"></span>
                  </p>
                </li>

               <li class="biosContentLI">
                    <p>
                     <b>Version: </b><span data-bind="text: bios.Version"></span>
                    </p>
                </li>
               .......
</ul>

私のViewModelは次のとおりです。

var viewModel = {
    bios: ko.observable(),
    cpu: ko.observable(),
    .....
}

$(document).ready(function () {
    ko.applyBindings(viewModel);
}
);

マッピング プラグインを使用しようとしていますが、正しく動作しません。

function showBios() {
var response = $.ajax({
        type: "GET",
        datatype: "json",
        url: "...",
        success: function (data) {
            objJS= jQuery.parseJSON(data);
            viewModel.bios(ko.mapping.fromJS(objJS));

             // I also tried this:
            //  ko.mapping.fromJS(objJS, {}, viewModel);
        }
      });

次のコードは機能しますが、ViewModel には observableArrays も含まれているため、applyBindings() をもう一度呼び出すと、その内容が失われます。

viewModel.bios = ko.mapping.fromJS(objJS);
ko.applyBindings(viewModel);

受信したデータを viewModel プロパティの "bios" にマップするにはどうすればよいですか? ページの各部分に複数のビューモデルを用意して、各モデルで複雑なオブジェクトではなく単純なプロパティを宣言できるようにするのは良い方法ですか?

4

1 に答える 1

1

私は通常、ページの読み込み時に applybindings を 1 回だけ呼び出すのが好きですが、これは、ページの読み込み時にバインドするすべてのオブザーバブルを作成する必要があることを意味します。バインドするオブザーバブルを使用して、bios の子ビュー モデルを作成し、常に update fromJSON メソッドを使用してデータを取り込むことができます。

やってみました：

function biosViewModel()
{
    var self = this;
    self.Caption = ko.observable();
    self.Version = ko.observable();
}

var viewModel =
{
    bios: ko.observable(new biosViewModel()),
    cpu: ko.observable()
}

次に、success メソッドで次のようにします。

ko.mapping.fromJSON(data, viewModel.bios());

サーバーから返されたデータでオブジェクトを更新します。

于 2013-03-14T15:36:27.540 に答える