I'm creating a custom ponent in aureliajs framework and injecting it a Router instance:

@inject(Router)
export class Pagination {
    constructor(router) {
        this.router = router;
    }
}

It will be used with list view-models in order to setup some basic pagination. Therefore I need to read current page number from an active route (that would look like: orders/:pageNum. I'm not sure however how to do it? I mean - I know it should probably be placed in Pagination attached method, but how to get to this :pageNum param?

I'm creating a custom ponent in aureliajs framework and injecting it a Router instance:

@inject(Router)
export class Pagination {
    constructor(router) {
        this.router = router;
    }
}

It will be used with list view-models in order to setup some basic pagination. Therefore I need to read current page number from an active route (that would look like: orders/:pageNum. I'm not sure however how to do it? I mean - I know it should probably be placed in Pagination attached method, but how to get to this :pageNum param?

• javascript
• aurelia

Share Improve this question Follow asked Aug 10, 2016 at 16:30 Marek M.Marek M. 3,94099 gold badges5252 silver badges104104 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Create a bindable property in your custom element. Take the page number from the active route and bind it to the custom element. For instance:

import { bindable } from 'aurelia-framework';

@inject(Router)
export class Pagination {

    @bindable page;

    constructor(router) {
        this.router = router;
    }
}

Usage:

<pagination page.bind="page"></pagination>

To get the page number in the active route, use the activate() hook:

activate(params) {
   this.page = params.pageNum;
}

You can use router.currentInstruction.params and router.currentInstruction.queryParams.

You can also observe the router to be notified when the route changes:

let sub = this.bindingEngine.propertyObserver(
    this.router, 'currentInstruction').subscribe(currentInstruction => {

  console.log(currentInstruction);

});