Access a DOM element in Aurelia

Question

How would you go about accessing a DOM element in Aurelia? This is a broad and general question, but I have a feeling there are one or two preferred ways to do this. I have two current cases in Aurelia now:

In the template I have a form. I want to access the form element in the view-model, on VM canDeactivate(), to interrupt a user navigating away from a half filled out form. So the scope in which I'm trying to access the element can be considered local.

In another view-model I want to hide navigation on VM activate(). Navigation resides in another view-model/template pair so the scope may be considered global.

score 32 · Accepted Answer · edited Jan 04 '18 at 15:41

32

As Rob suggested, use ref. For your example:

view

<form ref="myForm"></form>

viewModel

class ViewModel { 

    canDeactivate() {
        var form = this.myForm;
        // do stuffs
    }
}

For more information on the ref attribute, see here: http://aurelia.io/docs/binding/basics#function-references

edited Jan 04 '18 at 15:41

martin

825
10
15

answered Apr 25 '15 at 14:24

Matthew James Davis

12,134
7
61
90

Thanks! That is something like what I expected, I know the Aurelia manual is quite rudimentary at this time, but this certainly should have been in it. So I take it that Aurelia does not add any selectors sugar. I ended up using `this.element.querySelector('#form-id')` which is nice enough. I also came across a stub for a ES6 DOM-library which may be of interest: [link](http://www.ericponto.com/blog/2014/10/05/es6-dom-library/) – WeeHorse Apr 25 '15 at 16:19
One thing I didn't expect was that the DOM for the whole aurelia-app (in my case the whole body) was passed. In a sense, it might have been logical for only the part spawning from the template being passed. Not that it matters much. This way I don't need to find another way to access the DOM outside of my ViewModel scope. – WeeHorse Apr 25 '15 at 16:57
The link given is broken – rab Feb 02 '16 at 14:33
1

Best Answer, because it does include an example and the link to the reference. As we saw in this thread of answers, links can break. :) https://stackoverflow.com/help/how-to-answer Don't be lazy! – talves May 30 '17 at 16:39
I should get the "underrated" badge. – Matthew James Davis Jun 01 '17 at 09:08

score 11 · Answer 2 · edited Jan 04 '18 at 14:57

11

Use binding system's ref capability. See the docs http://aurelia.io/docs/binding/basics#referencing-elements

edited Jan 04 '18 at 14:57

martin

825
10
15

answered Apr 25 '15 at 19:39

EisenbergEffect

3,989
22
26

Thanks! Very direct! To be clear, if I were to bind a text input for its value and also access its DOM element I would do both value.bind and ref on the template element, is this correct? Like so: ` ` – WeeHorse Apr 25 '15 at 21:02
As expected (and prefered) I could only access a referenced element in its own VM, not in some other VM. So in my second case where I toggle navigation visibility I still use the injected element. Or is there a better way? – WeeHorse Apr 25 '15 at 21:09
can't you import the view model and reference `viewModel.my_text_el`? – Matthew James Davis Apr 28 '15 at 21:14

score 7 · Answer 3 · answered Jun 14 '16 at 22:11

7

Another option; if your view-model is exposed as a @customElement, its DOM element can be injected in the constructor:

@customElement
@inject(Element)
export class MyCustomElement {
    constrctor(element) {
        logger.info(element) // ==> <my-custom-element></my-custom-element>
    }
}

answered Jun 14 '16 at 22:11

Eliran Malka

15,821
6
77
100

I've tried that with the last version in a nested list item and though the element is working well, there is no info passed to the constructor about the element, so I'm forced to use `ref`. I'm always using autoinject so my syntax is a bit different and the logic may differ on the framework side. – Léon Pelletier Aug 13 '16 at 22:30

score 4 · Answer 4 · edited Dec 20 '16 at 17:21

4

Just as another point I came across when trying to use this for myself, the ref variable isn't available during construction, and this isn't clear in the documentation. You can begin to reference the element as mentioned above (http://aurelia.io/hub.html#/doc/article/aurelia/binding/latest/binding-basics/5) anytime during or after the attached method is called.

edited Dec 20 '16 at 17:21

martin

825
10
15

answered Sep 14 '15 at 15:58

LordZardeck

7,953
19
62
119

1

See this answer for more info: https://stackoverflow.com/questions/29988599/when-does-binding-to-ref-attribute-become-valid-in-aurelia/29988982#29988982 – Matthew James Davis Jun 01 '17 at 09:09

score 0 · Answer 5 · answered Aug 14 '17 at 11:30

0

Typescript version

@transient()
@autoinject
export class ViewModel { 
    myForm: any;
    canDeactivate() {
        var form = this.myForm;
        // do stuffs
    }
}

answered Aug 14 '17 at 11:30

RouR

6,136
3
34
25

Access a DOM element in Aurelia

5 Answers5

Linked