Question

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

JSON DATA：

  {"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一次，但这确实意味着您需要在页面加载时创建要绑定的所有可观察对象。您可以为bios创建一个子视图模型，同时使用您想要绑定的observable，然后始终使用更新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());

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

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

1 个答案: