这是我在这个项目中使用的寻呼机自定义元素(滚动到底部查看寻呼机)。
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;
}
以下是 pager 元素的使用方式:
订单列表.html
<pager page-count.bind="pageCount"
page-index.bind="pageIndex"
set-page.call="setPage($event)">
</pager>
编辑 2015 年 10 月 14 日
这是一个引导寻呼机 - 工作方式略有不同,但用法相同,不需要视图模型:
<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">«</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">»</span>
</a>
</li>
</ul>
</template>