web-dev-qa-db-fra.com

Accéder à un élément DOM dans Aurelia

Comment voudriez-vous accéder à un élément DOM dans Aurelia? C'est une question large et générale, mais j'ai le sentiment qu'il existe une ou deux manières préférées de le faire. J'ai deux cas en cours à Aurelia maintenant:

Dans le modèle, j'ai un formulaire. Je souhaite accéder à l'élément de formulaire dans le modèle de vue, sur VM canDeactivate (), afin d'interrompre un utilisateur qui quitte un formulaire à moitié rempli. La portée dans laquelle j'essaie d'accéder à l'élément peut donc être considérée comme locale.

Dans un autre modèle de vue, je souhaite masquer la navigation sur VM activate (). La navigation réside dans une autre paire modèle-vue/modèle, de sorte que la portée peut être considérée comme globale.

javascripthtml5domaurelia
26
WeeHorse

Comme Rob l'a suggéré, utilisez ref. Pour votre exemple:

vue

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

viewModel

class ViewModel { 

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

Pour plus d'informations sur l'attribut ref, voir ici: http://aurelia.io/docs/binding/basics#function-references

28
Matthew James Davis

Utilisez la capacité ref du système de reliure. Voir le document http://aurelia.io/docs/binding/basics#referencing-elements

11
EisenbergEffect

Une autre option; si votre modèle de vue est exposé en tant que @customElement, son élément DOM peut être injecté dans le constructeur:

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

Juste comme un autre point que je suis tombé sur en essayant d'utiliser ceci pour moi-même, la variable ref n'est pas disponible pendant la construction, et ceci n'est pas clair dans la documentation. Vous pouvez commencer à référencer l'élément tel que mentionné ci-dessus ( http://aurelia.io/hub.html#/doc/article/aurelia/binding/latest/binding-basics/5 ) à tout moment pendant ou après la attached méthode est appelée.

4
LordZardeck

TypeScript version

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