From 1eb32d1df5db86872a785b61ed7002da4ff5f29e Mon Sep 17 00:00:00 2001 From: Russ Watson Date: Tue, 4 Oct 2016 13:55:10 -0500 Subject: [PATCH 1/8] Publishes an inner instruction resolve --- src/app-router.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app-router.js b/src/app-router.js index ea3d91e2..92486244 100644 --- a/src/app-router.js +++ b/src/app-router.js @@ -199,9 +199,9 @@ function processResult(instruction, result, instructionCount, router) { function resolveInstruction(instruction, result, isInnerInstruction, router) { instruction.resolve(result); + let eventArgs = { instruction, result }; if (!isInnerInstruction) { router.isNavigating = false; - let eventArgs = { instruction, result }; let eventName; if (result.output instanceof Error) { @@ -216,6 +216,8 @@ function resolveInstruction(instruction, result, isInnerInstruction, router) { router.events.publish(`router:navigation:${eventName}`, eventArgs); router.events.publish('router:navigation:complete', eventArgs); + } else { + router.events.publish('router:navigation:innerInstruction:resolve', eventArgs); } return result; From 59ca6ad0a9ebdd47a5ad6bfc76800be56330122a Mon Sep 17 00:00:00 2001 From: Russ Watson Date: Sat, 15 Oct 2016 17:20:35 -0500 Subject: [PATCH 2/8] Updates published child event name from `router:navigation:innerInstruction:resolve` to `router:navigation:child:complete` --- src/app-router.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app-router.js b/src/app-router.js index 92486244..1032fb7f 100644 --- a/src/app-router.js +++ b/src/app-router.js @@ -217,7 +217,7 @@ function resolveInstruction(instruction, result, isInnerInstruction, router) { router.events.publish(`router:navigation:${eventName}`, eventArgs); router.events.publish('router:navigation:complete', eventArgs); } else { - router.events.publish('router:navigation:innerInstruction:resolve', eventArgs); + router.events.publish('router:navigation:child:complete', eventArgs); } return result; From 17b62ac68f308692d8034470d8b1a0c00ea85202 Mon Sep 17 00:00:00 2001 From: dkent600 Date: Fri, 23 Dec 2016 20:08:04 -0500 Subject: [PATCH 3/8] enhanced docs on layouts --- doc/article/en-US/router-configuration.md | 132 ++++++++++++++++------ 1 file changed, 100 insertions(+), 32 deletions(-) diff --git a/doc/article/en-US/router-configuration.md b/doc/article/en-US/router-configuration.md index d001d0f7..26abdad1 100644 --- a/doc/article/en-US/router-configuration.md +++ b/doc/article/en-US/router-configuration.md @@ -609,86 +609,154 @@ A pipeline step must be an object that contains a `run(navigationInstruction, ne ## [Layouts](aurelia-doc://section/10/version/1.0.0) -> Info -> Specifying layout on the `` element will set the default layout for all routes. -Similar to MVC-style master/layout pages, Aurelia allows configuration of multiple layouts. Here are the properties for creating layouts: +Similar to MVC-style master/layout pages, Aurelia allows you to use "layout" views. + +A layout in Aurelia is associated with a route configuration, and by implication, all the pages navigable-to within the route configuration. There are two ways to associate a layout with a route configuration. The first is via HTML in a view, the second is in view model code where you configure your routes. + +We'll look at the HTML way first. The `router-view` custom element is associated with the route configuration defined in its parent view's view model. By associating a layout with a `router-view` one can thus associate a layout with the same route configuration with which the `router-view` is associated. + +To specify a layout on the `router-view` custom element, we use the following attributes: -* `layoutView` property on a route object - specifies the layout view to use for the route. -* `layoutViewModel` property on a route object - specifies the view model to use with the layout view. -* `layoutModel` property on a route object - specifies the model parameter to pass to the layout view-model's activate function. +* `layoutView` - specifies the layout view to use. +* `layoutViewModel` - specifies the view model to use with the layout view. +* `layoutModel` - specifies the model parameter to pass to the layout view model's `activate` function. + +> Info +> All of these layout attributes are bindable. + +Here is an example of the HTML in which we specify that we want all views routed-to under the `router-view` to be "layed-out" in a view named `layout`: +Here is the layout view itself: + - +And here we define a view that we want to appear within the layout: + + + + + export class Module { + constructor() { + this.leftMessage = "I'm content that will show up on the left"; + this.rightMessage = "I'm content that will show up on the right"; + } + } + + + export class Module { + constructor() { + this.leftMessage = "I'm content that will show up on the left"; + this.rightMessage = "I'm content that will show up on the right"; + } + } + + + +Observe how we use the `slot` mechanism for associating parts of the layout to parts of the views that are to be contained within the layout. (Happy for developers, this is conveniently the same mechanism and syntax we use in Aurelia when providing content to custom elements.) + +Now we just have to define the route configuration that will be associated with the `router-view`: + export class App { - configureRouter(config, router) { - config.title = 'Aurelia'; - var model = { - id: 1 - }; + configureRouter(config, router){ config.map([ - { route: 'home', name: 'home', moduleId: 'home/index' }, - { route: 'login', name: 'login', moduleId: 'login/index', layoutView: 'views/layout-login.html' }, - { route: 'users', name: 'users', moduleId: 'users/index', layoutViewModel: 'views/model', layoutModel: model } + { route: '', name: 'home', moduleId: 'home' } ]); + + this.router = router; } } - import {Redirect, NavigationInstruction, RouterConfiguration, Router} from 'aurelia-router'; + import {RouterConfiguration, Router} from 'aurelia-router'; export class App { - configureRouter(config: RouterConfiguration, router: Router): void { - config.title = 'Aurelia'; - var model = { - id: 1 - }; + configureRouter(config: RouterConfiguration, router: Router): void {){ + config.map([ + { route: '', name: 'home', moduleId: 'home' } + ]); + + this.router = router; + } + } + + + +Thus when we navigate to "home" we will find that it is layed-out as desired inside the layout view. + +So that is how we use HTML to associate a layout view with a route configuration. + +We can also associate layouts with route configurations using more fluent code in our view model. Suppose we like what we've done above, but we have a couple other views that we would like to associate with a different layout and would thus like to partially override the configuration given in the HTML. The following code is an example of how one might do that: + + + + export class App { + configureRouter(config, router){ config.map([ - { route: 'home', name: 'home', moduleId: 'home/index' }, - { route: 'login', name: 'login', moduleId: 'login/index', layoutView: 'views/layout-login.html' }, - { route: 'users', name: 'users', moduleId: 'users/index', layoutViewModel: 'views/model', layoutModel: model } + { route: '', name: 'home', moduleId: 'home' }, + { route: 'login', name: 'login', moduleId: 'login/index', layoutView: 'layout-login.html' }, + { route: 'users', name: 'users', moduleId: 'users/index', layoutModel: model, layoutViewModel: 'model' } ]); + + this.router = router; + } + } + + + import {RouterConfiguration, Router} from 'aurelia-router'; + + export class App { + configureRouter(config: RouterConfiguration, router: Router): void {){ + config.map([ + { route: '', name: 'home', moduleId: 'home' }, + { route: 'login', name: 'login', moduleId: 'login/index', layoutView: 'layout-login.html' }, + { route: 'users', name: 'users', moduleId: 'users/index', layoutModel: model, layoutViewModel: 'model' } + ]); + + this.router = router; } } +The above example will assign different layouts to the "login" and "users" views, leaving "home" to remain as configured in the HTML. + ## [Internationalizing Titles](aurelia-doc://section/11/version/1.0.0) If your application targets multiple cultures or languages, you probably want to translate your route titles. The `Router` class has a `transformTitle` property that can be used for this. It is expected to be assigned a function that takes the active route's title as a parameter and then returns the translated title. For example, if your app uses `aurelia-i18n`, its routes' titles would typically be set to some translation keys From 42552c4a915272eeb6da99d3f3b3461881c047d2 Mon Sep 17 00:00:00 2001 From: dkent600 Date: Fri, 23 Dec 2016 21:06:08 -0500 Subject: [PATCH 4/8] more docs on layouts --- doc/article/en-US/router-configuration.md | 26 ++++++++++++----------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/doc/article/en-US/router-configuration.md b/doc/article/en-US/router-configuration.md index 26abdad1..af4ec71a 100644 --- a/doc/article/en-US/router-configuration.md +++ b/doc/article/en-US/router-configuration.md @@ -610,22 +610,22 @@ A pipeline step must be an object that contains a `run(navigationInstruction, ne ## [Layouts](aurelia-doc://section/10/version/1.0.0) -Similar to MVC-style master/layout pages, Aurelia allows you to use "layout" views. +Similar to MVC-style master/layout pages, Aurelia allows you to use "layout" views as a "master" template for a set of views. -A layout in Aurelia is associated with a route configuration, and by implication, all the pages navigable-to within the route configuration. There are two ways to associate a layout with a route configuration. The first is via HTML in a view, the second is in view model code where you configure your routes. +The set of views subject to being part of a layout is defined in Aurelia by a set of views referenced by one or more navigation routes. There are two ways to associate a layout with routes. The first is via HTML, the second is via code in a view model code where one can configure routes. -We'll look at the HTML way first. The `router-view` custom element is associated with the route configuration defined in its parent view's view model. By associating a layout with a `router-view` one can thus associate a layout with the same route configuration with which the `router-view` is associated. +We'll look at the HTML way first. The `router-view` custom HTML element is always associated with a set of one or more routes defined in its parent view's view model. By associating a layout with a `router-view` one can thus associate a layout with the same set of routes with which the `router-view` is associated. To specify a layout on the `router-view` custom element, we use the following attributes: -* `layoutView` - specifies the layout view to use. -* `layoutViewModel` - specifies the view model to use with the layout view. -* `layoutModel` - specifies the model parameter to pass to the layout view model's `activate` function. +* `layout-view` - specifies the file name (with path) of the layout view to use. +* `layout-view-model` - specifies the file name (with path) of the view model to use with the layout view. +* `layout-model` - specifies the model parameter to pass to the layout view model's `activate` function. > Info > All of these layout attributes are bindable. -Here is an example of the HTML in which we specify that we want all views routed-to under the `router-view` to be "layed-out" in a view named `layout`: +Here is an example of the HTML in which we specify that we want all routed-to views under `router-view` to be laid-out in a view with base file name `layout` located in the same directory as the containing view: @@ -670,7 +670,7 @@ And here we define a view that we want to appear within the layout: - export class Module { + export class Home { constructor() { this.leftMessage = "I'm content that will show up on the left"; this.rightMessage = "I'm content that will show up on the right"; @@ -678,7 +678,7 @@ And here we define a view that we want to appear within the layout: } - export class Module { + export class Home { constructor() { this.leftMessage = "I'm content that will show up on the left"; this.rightMessage = "I'm content that will show up on the right"; @@ -718,11 +718,13 @@ Now we just have to define the route configuration that will be associated with -Thus when we navigate to "home" we will find that it is layed-out as desired inside the layout view. +Thus when we navigate to "home" we will find that it is laid-out as desired inside the layout view. -So that is how we use HTML to associate a layout view with a route configuration. +Note there is nothing different about the above route configuration with or without the layout. It may contain any number of routes that would all be included, by default, in the layout. -We can also associate layouts with route configurations using more fluent code in our view model. Suppose we like what we've done above, but we have a couple other views that we would like to associate with a different layout and would thus like to partially override the configuration given in the HTML. The following code is an example of how one might do that: +So that is how we use HTML to associate a layout view with a set of routes. + +We can also associate layouts with route configurations using more fluent code in our view model. Suppose we like what we've done above, but we have a couple views that we would like to associate with a different layout and would thus like to partially override the configuration given in the HTML. The following code is an example of how we can do that: From cdc52fddb61b83d78f74bb7fcc14397acabcdfa1 Mon Sep 17 00:00:00 2001 From: dkent600 Date: Mon, 26 Dec 2016 16:16:17 -0500 Subject: [PATCH 5/8] layouts, view ports, swap order --- doc/article/en-US/router-configuration.md | 114 ++++++++++++++++++---- 1 file changed, 97 insertions(+), 17 deletions(-) diff --git a/doc/article/en-US/router-configuration.md b/doc/article/en-US/router-configuration.md index af4ec71a..0fff35ba 100644 --- a/doc/article/en-US/router-configuration.md +++ b/doc/article/en-US/router-configuration.md @@ -566,16 +566,20 @@ A pipeline step must be an object that contains a `run(navigationInstruction, ne ## [Rendering View Ports](aurelia-doc://section/9/version/1.0.0) +Every instance of a `router-view` custom element essentially defines a "view port". When you give a `router-view` a name, you can refer to it in the `viewPorts` property of the route configuration in your javascript. The value of a `viewPorts` property is an object where each property name is the name of a view port (ie, `router-view`) and each value is the `moduleId` destination of the route. Thus you can specify any number of view ports on a single route configuration. + > Info -> If you don't name a router-view, it will be available under the name 'default'. +> If you don't name a `router-view`, it will be available under the name 'default'. + +Following is an example of the use of view ports: @@ -607,25 +611,31 @@ A pipeline step must be an object that contains a `run(navigationInstruction, ne +> Info +> In addition to the `moduleId`, you can also specify a "layout" in the configuration of a view port. See the discussion of Layouts elsewhere in this document. + ## [Layouts](aurelia-doc://section/10/version/1.0.0) +Similar to MVC-style master/layout pages, Aurelia allows you to use a "layout" view like an MVC "master template" for a set of views. -Similar to MVC-style master/layout pages, Aurelia allows you to use "layout" views as a "master" template for a set of views. +The set of views subject to being part of a layout is defined in Aurelia as a set of views referenced by one or more routes in a router configuration. There are two ways to associate a layout with routes. The first is via HTML, the second is via view model code. -The set of views subject to being part of a layout is defined in Aurelia by a set of views referenced by one or more navigation routes. There are two ways to associate a layout with routes. The first is via HTML, the second is via code in a view model code where one can configure routes. +> Info +> We're going to be a little sloppy here in terminology. Technically, routes refer to "moduleIds", not +"views". Since the router resolves a moduleId to a view, indirectly the router does reference a view. It is easy to picture a view visually contained within a layout, so in this topic to we'll refer to views referenced by a route, not modules. -We'll look at the HTML way first. The `router-view` custom HTML element is always associated with a set of one or more routes defined in its parent view's view model. By associating a layout with a `router-view` one can thus associate a layout with the same set of routes with which the `router-view` is associated. +We'll look at using HTML first. We know that the `router-view` custom HTML element is always associated with a set of one or more views referenced in a router configuration given in its parent view's view model. By associating a layout with a `router-view` one can thus associate a layout with the same set of views with which the `router-view` is associated. To specify a layout on the `router-view` custom element, we use the following attributes: * `layout-view` - specifies the file name (with path) of the layout view to use. -* `layout-view-model` - specifies the file name (with path) of the view model to use with the layout view. +* `layout-view-model` - specifies the moduleId of the view model to use with the layout view. * `layout-model` - specifies the model parameter to pass to the layout view model's `activate` function. > Info > All of these layout attributes are bindable. -Here is an example of the HTML in which we specify that we want all routed-to views under `router-view` to be laid-out in a view with base file name `layout` located in the same directory as the containing view: +Following is an example of HTML in which we specify that we want all destination views reachable under the `router-view` to be laid-out inside a view with file name `layout.html`, located in the same directory as the view contianing the `router-view`: @@ -663,7 +673,7 @@ And here we define a view that we want to appear within the layout:

${rightMessage}.

-
This will not be displayed in the layout because it is not contained in a named slot.
+
This will not be displayed in the layout because it is not contained in any named slot referenced by the layout.
 @@ -718,13 +728,13 @@ Now we just have to define the route configuration that will be associated with -Thus when we navigate to "home" we will find that it is laid-out as desired inside the layout view. +Thus when we navigate to the module "home" we find that it is laid-out as desired inside the layout view. -Note there is nothing different about the above route configuration with or without the layout. It may contain any number of routes that would all be included, by default, in the layout. +Note there is nothing different about the above route configuration with or without the layout. It may reference any number of views that would all be included by default in the layout. -So that is how we use HTML to associate a layout view with a set of routes. +So that is how we use HTML to associate a layout view with a set of views referenced in a router configuration. -We can also associate layouts with route configurations using more fluent code in our view model. Suppose we like what we've done above, but we have a couple views that we would like to associate with a different layout and would thus like to partially override the configuration given in the HTML. The following code is an example of how we can do that: +We can also associate layouts with route configurations using code in our view model. Suppose we like what we've done above, but we have a couple views that we would like to associate with a different layout and would thus like to partially override the configuration given in the HTML. The following code is an example of how we can do that: @@ -733,7 +743,7 @@ We can also associate layouts with route configurations using more fluent code i config.map([ { route: '', name: 'home', moduleId: 'home' }, { route: 'login', name: 'login', moduleId: 'login/index', layoutView: 'layout-login.html' }, - { route: 'users', name: 'users', moduleId: 'users/index', layoutModel: model, layoutViewModel: 'model' } + { route: 'users', name: 'users', moduleId: 'users/index', layoutModel: 'layout-users', layoutViewModel: { access: "admin" } } ]); this.router = router; @@ -748,18 +758,88 @@ We can also associate layouts with route configurations using more fluent code i config.map([ { route: '', name: 'home', moduleId: 'home' }, { route: 'login', name: 'login', moduleId: 'login/index', layoutView: 'layout-login.html' }, - { route: 'users', name: 'users', moduleId: 'users/index', layoutModel: model, layoutViewModel: 'model' } + { route: 'users', name: 'users', moduleId: 'users/index', layoutModel: 'layout-users', layoutViewModel: { access: "admin" } } + ]); + + this.router = router; + } + } + + + +The above example will assign different layouts to the "login" and "users" views, overriding the HTML while leaving "home" to remain as configured in the HTML. Noticing we're using camel-cased property names here, unlike in the HTML. + +You can also specify a layout in the `viewPorts` configuration of a route. See a simple example, below: + + + + + + + + + + export class App { + configureRouter(config, router){ + config.map([ + { route: '', name: 'home', viewPorts: { myRouterView: { moduleId: 'home', layoutView: 'default.html' } } } ]); this.router = router; } } + + import {RouterConfiguration, Router} from 'aurelia-router'; + + export class App { + configureRouter(config: RouterConfiguration, router: Router): void {){ + config.map([ + { route: '', name: 'home', viewPorts: { myRouterView: { moduleId: 'home', layoutView: 'default.html' } } } + ]); + + this.router = router; + } + } + + + +## [View Swapping and Animation](aurelia-doc://section/11/version/1.0.0) + +When the Aurelia router navigates from one view to another, we refer to this as "swapping" one view for another. Aurelia gives us an optional set of strategies dictating how a swap proceeds, or more specifically, how animation plays out during the swap. We refer to these strategies more precisely as the "swap order". + +> Info +> If there is no animation defined, then swap-order has no visible impact. + +You can apply a swap strategy to one or more routes by applying the `swap-order` attribute to a `router-view` custom HTML element. The strategy will then be applied in any transition between two views accessible under the `router-view`. + +> Info +> `swap-order` is bindable. + +The following swap order strategies are available: + +* before - animate the next view in before removing the current view +* with - animate the next view at the same time the current view is removed +* after - animate the next view in after the current view has been removed (the default) + +Here is an example of setting the swap order strategy on a `router-view`: + + + + + -The above example will assign different layouts to the "login" and "users" views, leaving "home" to remain as configured in the HTML. -## [Internationalizing Titles](aurelia-doc://section/11/version/1.0.0) +## [Internationalizing Titles](aurelia-doc://section/12/version/1.0.0) If your application targets multiple cultures or languages, you probably want to translate your route titles. The `Router` class has a `transformTitle` property that can be used for this. It is expected to be assigned a function that takes the active route's title as a parameter and then returns the translated title. For example, if your app uses `aurelia-i18n`, its routes' titles would typically be set to some translation keys and the `AppRouter`'s `transformTitle` would be configured in such a way that the active route's title is translated using the `I18N`'s `tr` method: From a8641980e48e0d77c84ed21aacdc29a7c021165f Mon Sep 17 00:00:00 2001 From: dkent600 Date: Mon, 26 Dec 2016 16:31:19 -0500 Subject: [PATCH 6/8] document layout properties in RouteConfig interface --- src/interfaces.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/interfaces.js b/src/interfaces.js index 3fb386d3..97f5fc50 100644 --- a/src/interfaces.js +++ b/src/interfaces.js @@ -35,7 +35,8 @@ interface RouteConfig { * The view ports to target when activating this route. If unspecified, the target moduleId is loaded * into the default viewPort (the viewPort with name 'default'). The viewPorts object should have keys * whose property names correspond to names used by elements. The values should be objects - * specifying the moduleId to load into that viewPort. + * specifying the moduleId to load into that viewPort. The values may optionally include properties related to layout: + * `layoutView`, `layoutViewModel` and `layoutModel`. */ viewPorts?: any; @@ -84,6 +85,21 @@ interface RouteConfig { */ activationStrategy?: string; + /** + * specifies the file name of a layout view to use. + */ + layoutView: string; + + /** + * specifies the moduleId of the view model to use with the layout view. + */ + layoutViewModel: string; + + /** + * specifies the model parameter to pass to the layout view model's `activate` function. + */ + layoutModel: string; + [x: string]: any; } From 3bd4030e5c18b2ed9b5af9bbe08b5002bf0a8673 Mon Sep 17 00:00:00 2001 From: dkent600 Date: Mon, 26 Dec 2016 19:29:46 -0500 Subject: [PATCH 7/8] make props optional --- src/interfaces.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/interfaces.js b/src/interfaces.js index 97f5fc50..60ad2d50 100644 --- a/src/interfaces.js +++ b/src/interfaces.js @@ -88,17 +88,17 @@ interface RouteConfig { /** * specifies the file name of a layout view to use. */ - layoutView: string; + layoutView?: string; /** * specifies the moduleId of the view model to use with the layout view. */ - layoutViewModel: string; + layoutViewModel?: string; /** * specifies the model parameter to pass to the layout view model's `activate` function. */ - layoutModel: string; + layoutModel?: string; [x: string]: any; } From 844bd98aa8e9dea5b4081a41942855784f60f9b1 Mon Sep 17 00:00:00 2001 From: Vildan Softic Date: Tue, 3 Jan 2017 08:06:03 +0100 Subject: [PATCH 8/8] docs(i18n): update title on locale change adds info on how to update the title when the locale changes --- doc/article/en-US/router-configuration.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/doc/article/en-US/router-configuration.md b/doc/article/en-US/router-configuration.md index d001d0f7..c62423af 100644 --- a/doc/article/en-US/router-configuration.md +++ b/doc/article/en-US/router-configuration.md @@ -692,12 +692,13 @@ Similar to MVC-style master/layout pages, Aurelia allows configuration of multip ## [Internationalizing Titles](aurelia-doc://section/11/version/1.0.0) If your application targets multiple cultures or languages, you probably want to translate your route titles. The `Router` class has a `transformTitle` property that can be used for this. It is expected to be assigned a function that takes the active route's title as a parameter and then returns the translated title. For example, if your app uses `aurelia-i18n`, its routes' titles would typically be set to some translation keys -and the `AppRouter`'s `transformTitle` would be configured in such a way that the active route's title is translated using the `I18N`'s `tr` method: +and the `AppRouter`'s `transformTitle` would be configured in such a way that the active route's title is translated using the `I18N`'s `tr` method. Additionally you can listen to a custom event published by the I18N service to react on locale changes using the EventAggregator: import Backend from 'i18next-xhr-backend'; import {AppRouter} from 'aurelia-router'; + import {EventAggregator} from 'aurelia-event-aggregator'; export function configure(aurelia) { aurelia.use @@ -714,6 +715,11 @@ and the `AppRouter`'s `transformTitle` would be configured in such a way that th }).then(() => { const router = aurelia.container.get(AppRouter); router.transformTitle = title => i18n.tr(title); + + const eventAggregator = aurelia.container.get(EventAggregator); + eventAggregator.subscribe('i18n:locale:changed', () => { + router.updateTitle(); + }); }); }); @@ -723,6 +729,7 @@ and the `AppRouter`'s `transformTitle` would be configured in such a way that th import Backend from 'i18next-xhr-backend'; import {AppRouter} from 'aurelia-router'; + import {EventAggregator} from 'aurelia-event-aggregator'; export function configure(aurelia) { aurelia.use @@ -739,6 +746,11 @@ and the `AppRouter`'s `transformTitle` would be configured in such a way that th }).then(() => { const router = aurelia.container.get(AppRouter); router.transformTitle = title => i18n.tr(title); + + const eventAggregator = aurelia.container.get(EventAggregator); + eventAggregator.subscribe('i18n:locale:changed', () => { + router.updateTitle(); + }); }); });