计算属性未在 aurelia 中更新

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.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 元素的使用方法如下：

order-list.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">&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>