Computed property not updating in aurelia

Question

Currently I try to reevaluate my "enabled" property but its not re-computed after I change either pages or 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>

How is the normal way to achive this behaviour for a standard paging control? I try to disable the "next" button if on last page.

I appreciate any help.

Answer 1

Here's the pager custom element I used in this project (scroll to bottom to see the 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;
}

Here's how the pager element is used:

order-list.html

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

EDIT 10/14/2015

Here's a bootstrap pager- works a little differently but it's usage is the same, no view-model required:

<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>