Aurelia $parent is undefined on first page load

Question

In Aurelia I currently can't bind to a field from parent (app.ts) in landing page. If I explicitly use $parent, I get an exception telling me that $parent ist not defined.

If I route to another page and go back to the landing page $parent is defined now and I can access fields from parent directly without usage of $parent keyword.

I'm sure it word earlier but I think some updated package breaks it. (Didn't recognised it after update)

<h1>${testString}</h1><!-- Nothing displayed -->
<h1>${$parent.testString}</h1><!-- ERROR [app-router] TypeError: Cannot read property 'testString' of undefined -->

Both dont work initially after page load but after routing back to this page.

What am I missing?

Using aurelia-binding 2.1.5, aurelia-framework 1.3.0, aurelia-router 1.6.3

How are you creating your element referencing the app.ts as $parent? Are you using <compose> or using a custom element? — Jesse
It's just a page opened by the router. There is only <template>${$parent.testString}</template> on the page. — user1127860

Jeff G Jeff G · Accepted Answer · 2018-10-19T17:07:40

Instead of using $parent, just use dependency injection to get access to the parent's view-model.

Here's a GistRun example.

test-child.html

<template>
  <h1>${app.message}</h1>
</template>

test-child.js

import {inject} from 'aurelia-framework';
import {App} from './app';

@inject(App)
export class TestChild {
  constructor(app) {
    this.app = app;
  }
}

app.html

<template>
  <require from="./test-child"></require>
  <test-child></test-child>
</template>

app.js

export class App {
  message = 'Hello World';
}

Aurelia $parent is undefined on first page load

1 Answers