Javascript 如何使用knockout.js组件正确创建分页？

我正在为当前和未来的项目构建一个组件，该组件在淘汰组件级别上处理分页。我的想法是基于我的公认答案。也可以参考淘汰组件页面

这是迄今为止我的组件。我很难真正显示任何数据，更不用说动态表标题了

ko.components.register("jPage", {
viewModel: function (params) {
    var self = this;
    self.Items = params.Items;
    self.Keys = Object.keys(self.Items);
    self.PerPage = params.PerPage;
    self.Page = 1;
    self.PagesTotal = Math.ceil(self.Items.length / self.PerPage);

    self.ItemsVisible = ko.computed(function () {
        first = (self.Page * self.PerPage) - self.PerPage;
        return self.Items.slice(first, first + self.PerPage);
    })

    self.ChangePage = function (_page) {
        if (_page < 1 || _page > self.PagesTotal) return;
        this.Page(_page);
    }.bind(this);


},
template: 
    '<div data-bind="foreach: ItemsVisible"> \
        Display Table headers and data here <br>\
        <span data-bind="text: $data[0]"> </span>\
    </div>\
    <nav aria-label="Page navigation">\
    <ul class="pagination">\
        <li data-bind="css:{disabled: Page <= 1} ">\
            <a aria-label="Previous" data-bind="click: ChangePage( Page - 1 )">\
                <span aria-hidden="true">&laquo;</span>\
            </a>\
        </li>\
        <li><a data-bind="text: Page -2, click: ChangePage( Page - 2 ), visible: Page > 2 "> </a></li>\
        <li><a data-bind="text: Page -1, click: ChangePage( Page - 1 ), visible: Page > 1 "> </a></li>\
        <li class="active"><a data-bind="text: Page"> </a></li>\
        <li><a data-bind="text: Page +1, click: ChangePage( Page + 1 ), visible: (PagesTotal > Page +0) "></a></li>\
        <li><a data-bind="text: Page +2, click: ChangePage( Page + 2 ), visible: (PagesTotal > Page +1)"></a></li>\
        <li data-bind="css: {disabled: (PagesTotal < Page )}">\
            <a aria-label="Next" data-bind="click: ChangePage( Page + 1 )">\
                <span aria-hidden="true">&raquo;</span>\
            </a>\
        </li>\
    </ul>\
</nav>\
'
})

访问

项
键/值时缺少哪些变量或上下文

附加说明。
我没有任何必需的数据形式，因为我可以毫无后果地对其进行操作。
好的。我花了6个月才弄明白。但希望其他人会发现这和我一样有价值

我发现的诀窍不是使用组件，而是只使用HTML的模板。虽然我猜一个组件也可以工作

下面是用于分页的视图模型的代码，以及它如何工作的一个小示例。它只需要1个输入、一个数组，然后您只需绑定
PerPage
，并绑定输出、
PaginatedArray
和tah dah


函数MainViewModel（）{
var self=这个；
self.listofsuff=ko.observableArlay（）；
self.Pagination=ko.observable（新的PaginationVM（self.listofsuff））；
self.PopulateArray=函数（）{
对于（变量i=0；i<100；i++）{
self.listofuff.push（“项目”+i）；
}
}
self.PopulateArray（）；
}
函数分页VM（输入）{
var self=这个；
self.InputArray=输入；
self.PerPage=ko.observable（）；
self.Page=ko.可观察（1）；
self.PageTotal=ko.computed（函数（）{
var totalPages=Math.ceil（self.InputArray（）.length/parseInt（self.PerPage（））；
if（self.Page（）>totalPages&&totalPages>0）{
self.Page（总页数）；
}
返回总页数
})
self.PaginatedArray=ko.computed（函数（）{
var perPage=parseInt（self.perPage（））
var start=self.Page（）*每页-每页；
返回self.InputArray（）.slice（开始，开始+每页）；
})
self.ChangePageBy=函数（偏移量）{
返回函数（）{
self.Page（self.Page（）+偏移量）；
}
}
self.ChangePageTo=函数（newPage）{
返回函数（）{
开关（新页）{
“最后”一案：
self.Page（self.PageTotal（））；
打破
案例“第一”：
第（1）页；
打破
违约：
self.Page（newPage）；
}
}
}
}
应用绑定（新的MainViewModel（））



&拉阔；












&拉阔；


10
25
50
100


好的。我花了6个月才弄明白。但希望其他人会发现这和我一样有价值

我发现的诀窍不是使用组件，而是只使用HTML的模板。虽然我猜一个组件也可以工作

下面是用于分页的视图模型的代码，以及它如何工作的一个小示例。它只需要1个输入、一个数组，然后您只需绑定
PerPage
，并绑定输出、
PaginatedArray
和tah dah


函数MainViewModel（）{
var self=这个；
self.listofsuff=ko.observableArlay（）；
self.Pagination=ko.observable（新的PaginationVM（self.listofsuff））；
self.PopulateArray=函数（）{
对于（变量i=0；i<100；i++）{
推送（“项目”+i）的自清单；
}
}
self.PopulateArray（）；
}
函数分页VM（输入）{
var self=这个；
self.InputArray=输入；
self.PerPage=ko.observable（）；
self.Page=ko.可观察（1）；
self.PageTotal=ko.computed（函数（）{
var totalPages=Math.ceil（self.InputArray（）.length/parseInt（self.PerPage（））；
if（self.Page（）>totalPages&&totalPages>0）{
self.Page（总页数）；
}
返回总页数
})
self.PaginatedArray=ko.computed（函数（）{
var perPage=parseInt（self.perPage（））
var start=self.Page（）*perPage-perPage；
返回self.InputArray（）.slice（开始，开始+每页）；
})
self.ChangePageBy=函数（偏移量）{
返回函数（）{
self.Page（self.Page（）+偏移量）；
}
}
self.ChangePageTo=函数（newPage）{
返回函数（）{
开关（新页）{
“最后”一案：
self.Page（self.PageTotal（））；
打破
案例“第一”：
第（1）页；
打破
违约：
self.Page（newPage）；
}
}
}
}
应用绑定（新的MainViewModel（））



&拉阔；












&拉阔；


10
25
50
100


首先，为了对更改做出反应，必须观察属性。所以你的页面属性不会像现在这样做。一旦你解决了这个问题，然后所有使用它的引用，你的很多问题都会消失。首先，为了对变化做出反应，属性必须是可观察的。所以你的页面属性不会
<div data-bind="component: { name: 'jPage', params: { Items: CustomerList(), PerPage: 25} }">

[
  {FirstName: "John", Email: "John@example.com"},
  {FirstName: "Steve", Email: "Steve@example.com"},
  {FirstName: "Jim", Email: "Jim@example.com"}
]