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

Posted 2023-03-27

【中文标题】如何使用 knockout.js 数据绑定对数组进行分组和读取：使用

【英文标题】：how to group array and read using knockout.js data-bind: with

【发布时间】：2019-12-08 06:26:15

【问题描述】：

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

[ "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);

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

【问题讨论】：

var m = "UnpackedItems": GroupedUnpackedItems 在哪里使用？

抱歉，正在使用self.TheseUnpackedItems(m);

如果我通过vm，我可以阅读，但如果我通过m，我无法阅读。

【参考方案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>

【讨论】：

这很好用，谢谢。 Object.keys 效果很好！