无法使用 KnockoutJS 引用嵌套的 JSON 对象答案

【问题标题】：Unable to Reference Nested JSON Object with KnockoutJS无法使用 KnockoutJS 引用嵌套的 JSON 对象
【发布时间】：2014-08-26 11:49:18
【问题描述】：

我有一个 JSON 字符串，其中包含一个名为 data 的嵌套 JSON 对象。我试图引用嵌套 JSON 对象的 status 部分，但是当我在我的 HTML 中引用它时，KnockoutJS 不会填充与我的表中的状态有关的单元格。然而，KnockoutJS 确实填充了表的发送者部分。

JSON：

[{"statusmsg":"OK","data":{"status":"running"},"sender":"hostname","statuscode":0}]

KnockoutJS (service.js)：

function ServiceViewModel() {
   var self = this;
   self.rows = ko.observableArray();

   $.ajax({
          method: "GET",
          url: "/mcollective/service/status/servicename",
          success: function(data) {
             var observableData = ko.mapping.fromJSON(data);
             var array = observableData();
             self.rows(array);
          }
       });

};

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

HTML：

<tbody data-bind="foreach: rows">
              <tr>
                 <td data-bind="text: sender"></td>
                 <td>
                 <span data-bind="text: data.status, 
                                  css: { 'label-success': data.status == 'running', 
                                         'label-danger': data.status == 'stopped',
                                         'label': true }">
                 </span>
                 </td>
                 <td>
              </tr>
</tbody>

注意：我也在使用 Bootstrap 作为 CSS。

我检查了 Firefox Web 开发者控制台，没有与我的脚本相关的错误。

【问题讨论】：

标签： json twitter-bootstrap knockout.js

【解决方案1】：

映射插件将您的属性转换为可观察对象。

这意味着我们的data.status 属性将是一个ko.observable，这是一个您需要调用的函数，无需任何参数即可获取其值。

所以你需要修复你的css绑定并在那里写data.status()：

<span data-bind="text: data.status, 
                 css: { 'label-success': data.status() == 'running', 
                        'label-danger': data.status() == 'stopped', 
                        'label': true }"></span>

【讨论】：