Greifen Sie auf ein DOM-Element in Aurelia zu

Lesezeit: 4 Minuten

Kleines Pferd

Wie würden Sie vorgehen, um auf ein DOM-Element in Aurelia zuzugreifen? Dies ist eine breite und allgemeine Frage, aber ich habe das Gefühl, dass es ein oder zwei bevorzugte Möglichkeiten gibt, dies zu tun. Ich habe jetzt zwei aktuelle Fälle in Aurelia:

In der Vorlage habe ich ein Formular. Ich möchte auf das Formularelement im Ansichtsmodell auf VM canDeactivate() zugreifen, um einen Benutzer zu unterbrechen, der von einem halb ausgefüllten Formular wegnavigiert. Der Bereich, in dem ich versuche, auf das Element zuzugreifen, kann also als lokal betrachtet werden.

In einem anderen Ansichtsmodell möchte ich die Navigation auf VM activate() ausblenden. Die Navigation befindet sich in einem anderen Ansichtsmodell/Vorlagenpaar, sodass der Umfang als global angesehen werden kann.

Matthäus James Davis

Verwenden Sie, wie Rob vorgeschlagen hat ref. Für dein Beispiel:

Aussicht

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

viewModel

class ViewModel { 

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

Weitere Informationen zum ref-Attribut finden Sie hier: http://aurelia.io/docs/binding/basics#function-references

Vielen Dank! Das ist ungefähr das, was ich erwartet hatte, ich weiß, dass das Aurelia-Handbuch zu diesem Zeitpunkt ziemlich rudimentär ist, aber das hätte auf jeden Fall drin sein sollen. Ich nehme also an, dass Aurelia keinen Selektorszucker hinzufügt. Am Ende habe ich verwendet this.element.querySelector('#form-id') was schön genug ist. Ich bin auch auf einen Stub für eine ES6-DOM-Bibliothek gestoßen, der von Interesse sein könnte: Verknüpfung

– WeeHorse

25. April 2015 um 16:19 Uhr
Eine Sache, die ich nicht erwartet hatte, war, dass das DOM für die gesamte aurelia-App (in meinem Fall der gesamte Körper) übergeben wurde. In gewisser Weise wäre es vielleicht logisch gewesen, nur den Teil zu übergeben, der aus der Vorlage hervorgeht. Nicht, dass es viel ausmacht. Auf diese Weise muss ich keinen anderen Weg finden, um auf das DOM außerhalb meines ViewModel-Bereichs zuzugreifen.

– WeeHorse

25. April 2015 um 16:57 Uhr
Der angegebene Link ist defekt

– Rab

2. Februar 2016 um 14:33 Uhr
Beste Antwort, da sie ein Beispiel und den Link zur Referenz enthält. Wie wir in diesem Thread mit Antworten gesehen haben, können Links brechen. 🙂 stackoverflow.com/help/how-to-answer Sei nicht faul!

– Tale

30. Mai 2017 um 16:39 Uhr
Ich sollte das “Unterschätzt”-Abzeichen bekommen.

– Matthew James Davis

1. Juni 2017 um 9:08 Uhr

EisenbergEffekt

Verwenden Sie Bindungssysteme ref Fähigkeit. Siehe die Dokumente http://aurelia.io/docs/binding/basics#referencing-elements

Vielen Dank! Sehr direkt! Um es klar zu sagen, wenn ich eine Texteingabe für seinen Wert binden und auch auf sein DOM-Element zugreifen würde, würde ich sowohl value.bind als auch ref für das Vorlagenelement ausführen, ist das richtig? So: <input value.bind="my_text_val" ref="my_text_el">

– WeeHorse

25. April 2015 um 21:02 Uhr
Wie erwartet (und bevorzugt) konnte ich nur auf ein referenziertes Element in seiner eigenen VM zugreifen, nicht in einer anderen VM. In meinem zweiten Fall, in dem ich die Sichtbarkeit der Navigation umschalte, verwende ich immer noch das eingefügte Element. Oder gibt es einen besseren Weg?

– WeeHorse

25. April 2015 um 21:09 Uhr
können Sie das Ansichtsmodell und die Referenz nicht importieren viewModel.my_text_el?

– Matthew James Davis

28. April 2015 um 21:14 Uhr

Andere Option; wenn Ihr Ansichtsmodell als exponiert ist @customElementkann sein DOM-Element in den Konstruktor eingefügt werden:

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

Ich habe das mit der letzten Version in einem verschachtelten Listenelement versucht, und obwohl das Element gut funktioniert, werden dem Konstruktor keine Informationen über das Element übergeben, sodass ich gezwungen bin, es zu verwenden ref. Ich verwende immer Autoinject, daher ist meine Syntax etwas anders und die Logik kann sich auf der Framework-Seite unterscheiden.

– Léon Pelletier

13. August 2016 um 22:30 Uhr

Lord Zardeck

Als ein weiterer Punkt, auf den ich gestoßen bin, als ich versuchte, dies für mich zu nutzen, ist der ref Variable ist während der Konstruktion nicht verfügbar, und dies ist in der Dokumentation nicht klar. Sie können beginnen, das Element wie oben erwähnt zu referenzieren (http://aurelia.io/hub.html#/doc/article/aurelia/binding/latest/binding-basics/5) jederzeit während oder nach dem attached Methode aufgerufen wird.

Typoskript Ausführung

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

10540800cookie-checkGreifen Sie auf ein DOM-Element in Aurelia zu

#aurelia #dom #html #Javascript