Question

我正在学习关于knockout / json / mvc等人，并试图整理一个示例项目，但由于某种原因，我无法正确绑定数据。

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

任何人都能看到我遗失的任何明显事物吗？

从网络服务器收到JSON：

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

视图模型

$(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。

Knockout observableArray没有正确绑定

1 个答案: