Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

doc(routing): explain activation strategies #475

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

doc(routing): explain activation strategies #475

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions current/en-us/6. routing/1. configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -569,7 +569,7 @@ export class App {
}
```

Alternatively, you can also use `addPipelineStep(name, step)` with predefined step names from `PipelineSlotName` enum export.
Alternatively, you can also use `addPipelineStep(name, step)` with predefined step names from `PipelineSlotName` enum export.

```JavaScript Using PipelineSlotName export
import { PipelineSlotName } from 'aurelia-router';
Expand Down Expand Up @@ -644,7 +644,7 @@ import { RouterEvent } from 'aurelia-router';

export class App {
static inject = [EventAggregator];

constructor(ea) {
ea.subscribe(RouterEvent.Complete, (event) => {
console.log(event.instruction);
Expand All @@ -662,7 +662,7 @@ import {

export class App {
static inject = [EventAggregator];

constructor(ea: EventAggregator) {
ea.subscribe(RouterEvent.Complete, (event: { instruction: NavigationInstruction; result: PipelineResult }) => {
console.log(event.instruction);
Expand Down Expand Up @@ -1174,7 +1174,12 @@ export class App {

## Reusing an Existing View Model

Since the view model's navigation lifecycle is called only once, you may have problems recognizing that the user switched the route from `Product A` to `Product B` (see below). To work around this issue implement the method `determineActivationStrategy` in your view model and return hints for the router about what you'd like to happen. Available return values are `replace` and `invoke-lifecycle`. Remember, "lifecycle" refers to the navigation lifecycle.
For route transitions across different view-models, aurelia will always create a new instance of the new view model. But when the same view-model is used for two routes (see below), the view model is not replaced by default and only the view model's navigation lifecycle is called. You may have problems recognizing that the user switched the route from Product A to Product B. To work around this issue, you can implement the method `determineActivationStrategy` in your view model. This will return hints for the router about what you'd like to happen. Available return values are:

* replace
* invoke-lifecycle.

`replace` does not re-use the existing view-model, i.e. you get a new instance of product. This is less performant but if your view model builds up local state, you will have a clean start. `invoke-lifecycle` means, invoke the navigation lifecycle. Aurelia then re-uses the View-Model and (only) issues canDeactivate, deactivate, canActivate, activate callbacks on the same instance - e.g. new Product() - when switching from one route to another. This is efficient, but might surprise developers, because the view-model instance is not in a clean state.

```JavaScript Router View Model Activation Control
//app.js
Expand Down Expand Up @@ -1226,4 +1231,4 @@ export class Product implements RoutableComponentDetermineActivationStrategy {
```

> Info
> Alternatively, if the strategy is always the same and you don't want that to be in your view model code, you can add the `activationStrategy` property to your route config instead.
> Alternatively, if the strategy is always the same and you don't want that to be in your view model code, you can add the `activationStrategy` property to your route config instead.