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.
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)
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…
It works for me in Chrome. Thx 🙂
It gives me undefined for au property. Is this still supported?
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)
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