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.

Gatto

Answer 1

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

Finagle

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 – Gatto

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. – Gatto

The link given is broken – Dilly

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. :) stackoverflow.com/help/how-to-answer Don't be lazy! – Blister

I should get the "underrated" badge. – Finagle

Answer 2

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

Gershwin

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: <input value.bind="my_text_val" ref="my_text_el"> – Gatto

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? – Gatto

can't you import the view model and reference viewModel.my_text_el? – Finagle

Answer 3

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>
    }
}

Interferometer

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. – Internuncio

Answer 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.

Desantis

See this answer for more info: #29989099 – Finagle

Answer 5

Typescript version

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

Dumbstruck