如何使用 knockout.js 数据绑定对数组进行分组和读取：使用

Question

我正在尝试对数组进行分组

[{ "Name": "test1", "Other": "Junk" }, 
{ "Name": "test1", "Other": "Junk2" }, 
{ "Name": "test2", "Other": "Pile" }]

我正在使用以下方法按属性分组。

var groupBy = function (xs, key) {
return xs.reduce(function (rv, x) {
        (rv[x[key]] = rv[x[key]] || []).push(x);
        return rv;
    }, {});
};

我的输出是，“test1”：{children info}，“test2”：{one child info}

我正在使用 knockout.js 将此信息传递给一个模式，我正在使用 data-bind="with: results"

我只是不确定如何将结果显示为

test1 - (2) *test1 的计数/长度 test2 - (1) *test2 的计数/长度

我尝试过使用 data-bind="foreach: $parent"，这似乎不起作用。我还尝试将对象设置为名为 UnpackedItems 的父对象，然后在 UnpackedItems 上使用 foreach .. 这也不起作用。

<div class="modal fade" id="myModal" data-bind="with: TheseUnpackedItems" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Unpacked Items</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <table style="margin: auto;" class="table">
                    <tbody data-bind="foreach: UnpackedItems">
                        <tr>
                            <td>
                                <p class="form-control-static" data-bind="text: Name"></p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

self.ShowUnpacked = function(vm) {

  var groupBy = function(xs, key) {
    return xs.reduce(function(rv, x) {
      (rv[x[key]] = rv[x[key]] || []).push(x);
      return rv;
    }, {});
  };

  const Property = "Name";
  const GroupedUnpackedItems = groupBy(vm.UnpackedItems, Property);

  var test = JSON.stringify(GroupedUnpackedItems);

  var m = { "UnpackedItems": GroupedUnpackedItems }

  self.TheseUnpackedItems(vm);
}

我没有收到任何错误，但是实际上没有显示任何数据。

Answer 1

UnpackedItems 是一个对象。因此，您不能使用 foreach 绑定。您可以使用 Object.keys() 循环遍历对象的键

<tbody data-bind="foreach: Object.keys(UnpackedItems)">
    <tr>
        <td>
            <p class="form-control-static" data-bind="text: $data"></p>
        </td>
    </tr>
</tbody>

这是一个有效的 sn-p：

const groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};
  
function viewModel() {
  const self = this;
  const UnpackedItems=[{Name:"test1",Other:"Junk"},{Name:"test1",Other:"Junk2"},{Name:"test2",Other:"Pile"}],
    Property = "Name",
    GroupedUnpackedItems = groupBy(UnpackedItems, Property),
    m = { "UnpackedItems": GroupedUnpackedItems }

  self.TheseUnpackedItems = ko.observable(m);
}

ko.applyBindings(new viewModel)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div id="myModal" data-bind="with: TheseUnpackedItems">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Unpacked Items</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <table style="margin: auto;" class="table">
          <tbody data-bind="foreach: Object.keys(UnpackedItems)">
            <tr>
              <td>
                <p class="form-control-static" data-bind="text: $data"></p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>