无法将 JSON 对象映射到 ViewModel（敲除 js）

Question

我正在从 WCF 服务接收 json 数据并希望将其映射到我的 viewModel。

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”？为页面的每个部分设置多个视图模型是否是一种好方法，这样我可以在每个模型中声明简单的属性，而不是复杂的对象？

Answer 1

我通常只喜欢在加载页面时调用一次 applybindings，但这确实意味着您需要在页面加载时创建所有要绑定的 observables。您可以为 bios 创建一个子视图模型，以及您想要绑定的 observables，然后始终使用 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()
}

那么，在你的成功方法中：

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

使用从服务器返回的数据更新对象。