javascript - knockout observableArray 未正确绑定(bind)

Question

我正在学习 knockout/json/mvc 等，并尝试组合一个示例项目，但由于某种原因我无法正确绑定(bind)数据。

在下面的代码片段中，我从 Web 服务器获取了一些 JSON 数据，然后尝试将其映射到一个函数，最后映射到我的 knockout observableArray。然后我要做的是使用此 observableArray 绑定(bind)到 HTML 表。但是 HTML 表不显示任何数据。我在 HTML 页面上放了一个标签，这 确实 打印出来但 toString() 值为: [对象对象] 五次，这与 JSON 数据中的属性数量相匹配。

任何人都可以看出我遗漏了什么吗？

从网络服务器接收到的 JSON:

{ "Id": 1, "Name": "Inst123", "Price": 10, "DateTime": "2014-01-16T17:22:43.6383507+00:00", "Description": "Descriptions" };

.

View 模型

$(document).ready(function () {
    var gtViewModel = new GvTradeViewModel();
    ko.applyBindings(gtViewModel);
    console.log("ViewModel created");
});

    var GvTradeViewModel = function () {
    var self = this;
    self.gvTrades = ko.observableArray([]);

    var apiUrl = "http://localhost:57858/api/Trade/1";

    console.log("Starting JSON data retrieval from: " + apiUrl);

    $.getJSON(apiUrl)
       // Handle success event.
      .done(function (jsonData) {
          if (jsonData.isEmptyObject)
              console.log("NoData recieved");
          else {
              console.log("JSON data: " + jsonData);

              var mappedTrades = $.map(jsonData, function (gvTradeData) {
                  return new GvTrade(gvTradeData);
              });
              self.gvTrades(mappedTrades);
              console.log(self.gvTrades);

          }
      })
      // Handle error/fail event.
     .fail(function (jqxhr, textStatus, error) {
         var err = textStatus + ", " + error;
         console.log("Request Failed: " + err);
     });
};

function GvTrade(data) {
    this.TradeId = ko.observable(data.TradeId);
    this.InstrumentName = ko.observable(data.InstrumentName);
    this.DateTime = ko.observable(data.DateTime);
    this.Price = ko.observable(data.Price);
    this.Description = ko.observable(data.Description);
}

HTML

<table>
<thead>
    <tr>
        <th>TradeId</th>
        <th>InstrumentName</th>
        <th>Price</th>
        <th>DateTime</th>
        <th>Description</th>
    </tr>
</thead>
<tbody data-bind="foreach: $data.gvTrades">
    <tr>
        <td data-bind="text: InstrumentName"></td>
        <td data-bind="text: Price"></td>
        <td data-bind="text: DateTime"></td>
        <td data-bind="text: Description"></td>
    </tr>
</tbody>

Answer 1

来自您的服务器的 JSON 表示单个对象，而不是数组。

因此，当您调用 $.map 时，它不会将您的数据正确映射为数组，因此您最终会得到一些无法使用的对象。

要解决此问题，您需要确保您的 jsonData 在映射操作之前包含一个数组，您可以通过调用 jQuery.makeArray 来完成此操作在它上面(或者你可以有一个基于你的数据类型的 if 决定你是否需要映射):

var mappedTrades = $.map($.makeArray(jsonData), function (gvTradeData) {
    return new GvTrade(gvTradeData);
});

演示 JSFiddle .