javascript - 在表中使用 knockoutjs foreach 控件显示有限行

Question

我在 View 模型中有一个名为 results 的对象，我只是使用 foreach 循环在 View 文件中显示这些行。

<table>
                    <thead>
                        <tr>
                            <th >Id</th>
                            <th >Name</th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: result">
                        <tr>
                            <td data-bind="text: Nr"></td>
                            <td data-bind="text: Name"></td>
                        </tr>
                    </tbody>
</table>

我的结果对象大约有 300 行，但我想仅显示前 10 行，然后添加一个链接以加载更多行。

您能告诉我如何实现这一目标吗？ 我不希望使用 knockoutJS gridview 。

谢谢

Answer 1

您的 foreach 应该绑定(bind)到一个计算函数，该计算函数返回您想要显示的行切片。您需要一个 observable 来存储有多少行，以及一个函数来增加行数。

function obj(nr, name) {
  return {
    Nr: nr,
    Name: name
  };
}

vm = {
  howmany: ko.observable(3),
  showMore: function() {
    vm.howmany(vm.howmany() + 3);
  },
  result: [
    obj(1, 'one'),
    obj(2, 'two'),
    obj(3, 'three'),
    obj(4, 'four'),
    obj(5, 'five'),
    obj(6, 'six'),
    obj(7, 'seven'),
    obj(8, 'eight'),
    obj(9, 'nine'),
    obj(10, 'one')
  ],
  sliced: ko.pureComputed(function () {
    return vm.result.slice(0, vm.howmany());
  })
};

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: sliced">
    <tr>
      <td data-bind="text: Nr"></td>
      <td data-bind="text: Name"></td>
      <td data-bind="text: Date.now()"></td>
    </tr>
  </tbody>
</table>
<button data-bind="click: showMore">Show More</button>