淘汰寻呼

问题描述 投票:0回答:1

我有一个带有分页函数的视图模型,它维护 pageIndex 属性。 Viewmodel 有一个包含页面的页面数组。每个页面都有自己的 pageNumber 属性。

我的视图模型的分页代码:

//paging
pageIndex: ko.observable(),
pageSize: ko.observable(),
pageCount: ko.observable(),
pages: ko.observableArray([]),
nextPage: function () {
    alert("Next");
    this.pageIndex = this.pageIndex + 1;
    alert(this.pageIndex);
},
previousPage: function () {
    //alert("PRev");
    this.pageIndex = this.pageIndex - 1;
    alert(this.pageIndex);
},
gotoPage: function (page) {
    //alert("GO:" + page.pageNumber);
    this.pageIndex = page.pageNumber;
    alert(this.pageIndex);
},

在我看来,我有一个嵌套列表:

<nav id="paging">
<ul class="paginationList">
    <li class="paginationList" data-bind="visible: pageIndex > 0">
        <a href="#" data-bind="click: previousPage"><<</a>
    </li>
</ul>
<ul class="paginationList" data-bind="foreach: pages">
    <li class="paginationList">
            <a href="#" data-bind="click: $parent.gotoPage, css: { disabled: $parent.pageIndex == $data.pageNumber }, text: $data.pageNumber"></a>     
    </li>
</ul>
<ul class="paginationList">
    <li class="paginationList" data-bind="visible: pageIndex < pageCount">
        <a href="#" data-bind="click: nextPage">>></a>
    </li>
</ul>

它可以工作,但是当单击“下一步”功能时 pageIndex 会发生变化,但锚点禁用状态不会改变。

我无法解决为什么会发生这种情况。

knockout.js pagination
1个回答
6
投票

pageIndex
不是属性而是函数。将其设置为:

this.pageIndex(page.pageNumber);
© www.soinside.com 2019 - 2024. All rights reserved.