• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Access The Aurelia Controller/App Instance From Your Browser

Aurelia 1 · July 4, 2016

One of the lesser known abilities of Aurelia is that every Aurelia element has an au property on it. This means if you query the DOM for an Aurelia element, it will have an au property which contains app and controller.

While this is really handy to know, in most cases if you are a Chrome user, then the Aurelia Context plugin for Chrome is probably a safer bet as it integrates into the Chrome developer tools.

A convenient test of accessing the au property is to open up Chrome, go into your Aurelia app and then paste the following into the console:

document.querySelector('[au-target-id]').au.controller;

This will allow you to access the underlying view-model via the viewModel property on the controller as well as numerous other properties. I am not going to go through each property, but this is handy if you’re wanting to access an elements view-model (perhaps from a jQuery plugin, etc) and act accordingly.

The more you know.

Dwayne

Leave a Reply Cancel reply

6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Eike
Eike
5 years ago

it’s easier to just select a DOM element in your dom inspector and then execute
$0.au.controller

$0 always references to the currently selected dom element in developer toolkits (both chrome and FF)

0
kubrt
kubrt
5 years ago

Does this still apply?

None of the browsers I tried have the .au property on the element returned by the querySelector.

Neither does the $0 mentioned above…

0
loaded02
loaded02
5 years ago

It works for me in Chrome. Thx ๐Ÿ™‚

0
Kiran Deore
Kiran Deore
5 years ago

It gives me undefined for au property. Is this still supported?

0
Daniel
Daniel
4 years ago

Yes, it is still working. You might just not have the property on your au object.
Try just using “au”….

document.querySelector(‘[au-target-id]’).au
$0.au (if you follow Eike’s suggestion)

0
Martin
Martin
4 years ago

For me, on Aurelia Framework v1.1.2 I couldn’t find the .au property, but was worked was either;

document.querySelector(‘body’).aurelia.container.viewModel or
document.querySelector(‘body’).aurelia.root.viewModel

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • How To Mock uuid In Jest
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • Which Neural DSP Archetype Plugins Should You Buy?
  • Removing A Character From The Start/End of a String In Javascript
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?

Recent Comments

  • Thebe on How to Remove the My Sites Menu From the WordPress Admin Bar
  • Maccas worker jn the 2000s on Dear McDonald’s: bring back the Warm Cookie Sundae, you cowards
  • Anamika Singh on Testing Event Listeners In Jest (Without Using A Library)
  • Stefan on A List of WordPress Gutenberg Core Blocks
  • pandammonium on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 ยท Dwayne Charrington ยท Log in

wpDiscuz