aurelia - Bind across templates -

at app.html i'm drawing breadcrumb breadcrumb template

<template>   <nav>     <ol class="breadcrumb">       <li repeat.for="crumb of breadcrumb" class="breadcrumb-item ${$last ? 'active' : ''}">         ${crumb.name}       </li>     </ol>   </nav> </template> 

now, define different value "breadcrumb" property each page. prefer call breadcrumb template once, @ app.html.

export class pagea {   breadcrumb = ['parenta', 'childa']   constructor () {   } }  export class pageb {   breadcrumb = ['parentb', 'childb']   constructor () {   } } 

how can achieve this?

if want declare breadcrumb custom element in app.html view (rather in each separate page view) , bind breadcrumb property values declare in child pages, straight forward solution use separate singleton service holds breadcrumb data.

for example:

import { singleton } "aurelia-framework";  @singleton() export class breadcrumbservice {     breadcrumb = []; } 

inject breadcrumb.js so:

import { inject } "aurelia-framework" import { breadcrumbservice } "./breadcrumb-service";  @inject(breadcrumbservice) export class breadcrumb{     constructor(breadcrumbservice) {         this.breadcrumbservice = breadcrumbservice;     } } 

with slight modification breadcrumb.html:

<template>     <nav>         <ol class="breadcrumb">             <li repeat.for="crumb of breadcrumbservice.breadcrumb" class="breadcrumb-item ${$last ? 'active' : ''}">                 ${crumb.name}             </li>         </ol>     </nav> </template> 

then in each child page inject breadcrumbservice , modify breadcrumb property, automatically updates value in breadcrumb.js:

import { inject } "aurelia-framework" import { breadcrumbservice } "breadcrumb-service";  @inject(breadcrumbservice) export class pagea {     constructor(breadcrumbservice) {         breadcrumbservice.breadcrumb = ['parenta', 'childa'];     } }  @inject(breadcrumbservice) export class pageb {     constructor() {         breadcrumbservice.breadcrumb = ['parentb', 'childb'];     } } 

edit

you might have force binding refresh on repeat.for first splicing breadcrumb array on breadcrumb service each time before changing in childpages, target binding might not update when set array different value. because repeat.for uses collection observer listens .splice() etc, not check array object reference equality.

you encapsulate in breadcrumbservice:

import { singleton, taskqueue, inject } "aurelia-framework";  @singleton() @inject(taskqueue) export class breadcrumbservice {     breadcrumb = [];      constructor(taskqueue) {         this.taskqueue = taskqueue;     }      setbreadcrumb(breadcrumb) {         this.breadcrumb.splice(0);          // using micro task gives repeat.for opportunity respond .slice() before setting new values         this.taskqueue.queuemicrotask(() => {             this.breadcrumb.push(breadcrumb);         });     } } 

and in child pages:

import { inject } "aurelia-framework" import { breadcrumbservice } "breadcrumb-service";  @inject(breadcrumbservice) export class pagea {     constructor(breadcrumbservice) {         breadcrumbservice.setbreadcrumb(['parenta', 'childa']);     } }  @inject(breadcrumbservice) export class pageb {     constructor() {         breadcrumbservice.setbreadcrumb(['parentb', 'childb']);     } }