javascript - 在knockout js中显示json对象详细信息

Question

我有以下 fiddle ，我试图以键:值对的形式显示数据，即，键作为标题，后面跟着信息作为行。

我有这种格式的数据:

 self.data = ko.observableArray([{
        1:
        {

            name: 'Name 1',
            lastLogin: '8/5/2012'

        }
        }
    , {
         2:
         {
            name: 'Name 2',
            lastLogin: '2/8/2013'
        }
    }

    ]);

我的 fiddle 为:

https://jsfiddle.net/1988/z7nnf0fh/1/

我期待的是:

1

name    Name 1  lastLogin   8/5/2012

2
name    Name 2  lastLogin   2/8/2013

Answer 1

我个人会将所有逻辑移至您的 View 模型中。然后你可以使用 ko.toJSON 来字符串化每个对象的内容，或者如果你真的想要像上面那样的输出，你可以这样做:

function DataModel() {
  var self = this;
  self.data = ko.observableArray([{
      1: {

        name: 'Name 1',
        lastLogin: '8/5/2012'

      }
    }, {
      2: {
        name: 'Name 2',
        lastLogin: '2/8/2013'
      }
    }

  ]);
  self.formattedValues = ko.observableArray([]);
  self.formatData = function() {
    var tempRow = [];
    ko.utils.arrayForEach(self.data(), function(item) {
      for (var i in item) {
        for (var j in item[i]) {
          tempRow.push({
            key: j,
            value: item[i][j]
          });
        }
        self.formattedValues.push({
          key: i,
          rows: tempRow
        });
        tempRow = [];
      }
    })
  };
  self.formatData();
}

var dataModel = new DataModel();
ko.applyBindings(dataModel);

.name {
  color: #bbb;
}
.value {
  fot-weight: bold
}
th {
  width: 25px;
}
p {
  margin-right: 10px;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind="template: { name: 'template', data: formattedValues }"></div>

<script type="text/html" id="template">
  <table>
    <tbody data-bind="foreach: $data">
      <tr>
        <td data-bind="text: key"></td>
      </tr>
      <tr>
        <td data-bind="foreach: rows">
          <p>
            <span class="name" data-bind="text: key + ': '"></span>
            <span class="value" data-bind="text: value"></span>
          </p>
        </td>
      </tr>
    </tbody>
  </table>
</script>

希望能有所帮助