在表

Question

我在viewmodel中有一个名为results的对象，我只是在foreach循环的视图文件中显示这些行。

<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应该绑定到一个计算器，返回您要显示的行片。你需要一个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>