Question

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

我认为我过于复杂了。

所以我的想法是，如果客户端通过网址传入类似：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更新。

类似的东西：

＆＃13;

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());

＆＃13;

<!-- 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>

＆＃13;

分页，引导和淘汰赛

1 个答案: