分页、引导和淘汰赛

Question

所以我没有选择使用可以让我的生活变得如此轻松的外部第三方库，所以我必须从头开始构建它。

我认为我把这件事复杂化了。

所以我们的想法是，如果客户端通过 url 传入，例如：showPages=4。然后我们有类似的东西：

<< < 1 2 3 4 _5_ 6 7 8 9 > >>

其中 5 是当前页面，您应该看到当前页面左侧 4 和右侧 4（假设最大页面数为 20）

到目前为止，我的视图模型如下所示：

var ViewModel = {
    self.pagesBefore = ko.observable(4);
    self.pagesAfter = ko.observable(4);
    self.currentPage = ko.observable(5);
    self.totalPages = ko.observable(20);
    self.pageStart = ko.observable(0);
    self.pageEnd = ko.observable(0);
}

我认为我过于复杂了，因为我认为我不需要之前的页面和之后的页面，我想我可以将其更改为：self.showPages(4)

我遇到的问题是将它放在视图中，我没有问题确定从哪里开始，因此例如视图模型中可能有一个方法：

var endPage = self.currentPage() + self.pagesAfter();

if (endPage <= self.totalPages()) {
  self.pageEnd(endPage); // In our example above its 9
} else { 
  self.pageEnd(self.totalPages());
}

将“最终”页面移到右侧，在本例中为 9。

另一个计算“起始页面（或当前页面之前的页面）”是什么：

var startPage = self.currentPage() - self.pagesBefore();

if (startPage > 1) {
  self.pageStart(startPage); // In our example above its 1
} else { 
  self.pageEnd(1);
}

所以我最终会得到一个看起来像这样的视图模型变量：

var ViewModel = {
    self.pagesBefore = ko.observable(4);
    self.pagesAfter = ko.observable(4);
    self.currentPage = ko.observable(5);
    self.totalPages = ko.observable(20);
    self.pageStart = ko.observable(1);
    self.pageEnd = ko.observable(9);
}

所以我的问题是：如何将其转换为视图，以便我有一个分页元素，其中选择了 5 个，右侧有 4 个，左侧有 4 个，总共 20 页？ >

Answer 1

让您的 JavaScript 制作一组对象以显示在页面上可能更容易。您可以使用 ko.computed 函数执行此操作。 然后要显示它，您只需在 HTML 中使用敲除 foreach。

由于它是一个计算函数，因此更改 currentPage 或 totalPage observable 将自动导致您的 HTML 更新。

类似：

function ViewModel() {
  var self = this;

  self.currentPage = ko.observable(5);
  self.totalPages = ko.observable(20);
  self.pagesBefore = ko.observable(4);
  self.pagesAfter = ko.observable(4);
  
  self.pages = ko.computed(function() {
      // Work out the start and end pages - same logic as you already had
      var startPage = self.currentPage() - self.pagesBefore();
      if (startPage < 1) {
          startPage = 1
      }
      var endPage = self.currentPage() + self.pagesAfter();
      if (endPage > self.totalPages()) {
          endPage = self.totalPages();
      }

      // Make the page array
      var pageArray = [];
      for (var i = startPage; i <= endPage; i++) {
          pageArray.push({ page: i, highlight: i == self.currentPage() });
      }
      return pageArray;
  });
}

ko.applyBindings(new ViewModel());

<!-- Stuff to get the snippet to work -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<style>
  ul li {
    display: inline;
  }
  .high { color: red; }
</style>

<!-- output the pages (the important bit) -->
<ul data-bind="foreach: pages">
  <li data-bind="text: page, css: (highlight ? 'high' : '')"></li>
</ul>