Question

目前我尝试重新评估我的“已启用”属性，但在更改页面或pageIndex后没有重新计算。

page.js

export class Test {
    pageIndex = 0;
    pages = 2;

    constructor() {
        this.items = [
            {title:"Prev.", enabled:this.prevAvailable},
            {title:"Next", enabled:this.nextAvailable}
        ];
    }

    get prevAvailable() {
        return this.pageIndex > 0;
    }

    get nextAvailable}() {
        return this.pageIndex < this.pages;
    }
}

page.html中

<template>
    <ul>
        <li repeat.for="item of items">
            <button if.bind="item.enabled">
                ${item.title}
            </button>
        </li>
    </ul>
</template>

如何为标准分页控件实现此行为的正常方法？如果在最后一页，我尝试禁用“下一步”按钮。

我感谢任何帮助。

Answer 1

以下是我在 this project 中使用的寻呼机自定义元素（滚动到底部查看寻呼机）。

pager

pager.html

<template>
  <ul class="pagination" show.bind="pageCount > 1">
    <li class="${pageIndex === 0 ? 'disabled' : 'waves-effect'}">
      <a href="#" click.delegate="setPage(0)"><i class="mdi-navigation-chevron-left"></i></a>
    </li>
    <li repeat.for="p of pageCount" class="${p === $parent.pageIndex ? 'active' : 'waves-effect'}">
      <a href="#" click.delegate="$parent.setPage(p)">${p + 1}</a>
    </li>
    <li class="${pageIndex === pageCount - 1 ? 'disabled' : 'waves-effect'}">
      <a href="#" click.delegate="setPage(pageCount - 1)"><i class="mdi-navigation-chevron-right"></i></a>
    </li>
  </ul>
</template>

pager.js

import {bindable} from 'aurelia-framework';

export class Pager {
  @bindable pageIndex;
  @bindable pageCount;
  @bindable setPage;
}

以下是使用寻呼机元素的方式：

order-list.html

<pager page-count.bind="pageCount"
       page-index.bind="pageIndex"
       set-page.call="setPage($event)">
</pager>

编辑2015年10月14日

这是一个bootstrap pager-工作方式略有不同，但它的用法是相同的，不需要视图模型：

<template bindable="pageCount, pageIndex, setPage">
  <ul ref="pager" class="pagination" if.bind="pageCount > 1"
      offset.bind="pageIndex + 5 > pageCount && pageCount > 5 ? (pageCount - 5) : (3 * (pageIndex - 1 - (pageIndex - 1) % 3) / 3)">
    <li class="${pageIndex === 0 ? 'disabled' : ''}">
      <a href="#" aria-label="Previous" click.delegate="setPage(0)">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li repeat.for="p of pageCount > 5 ? 5 : pageCount" class="${p + $parent.pager.offset === $parent.pageIndex ? 'active' : ''}">
      <a href="#" click.delegate="$parent.setPage(p + $parent.pager.offset)">${p + $parent.pager.offset + 1}</a>
    </li>
    <li class="${pageIndex === pageCount - 1 ? 'disabled' : ''}">
      <a href="#" aria-label="Previous" click.delegate="setPage(pageCount - 1)">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</template>

计算属性未在aurelia中更新

1 个答案:

编辑2015年10月14日