Ich habe ein benutzerdefiniertes Element, das Benutzereingaben annimmt, und beim Klicken auf [Speichern] klicke ich auf Informationen zum übergeordneten Ansichtsmodell, damit ich es an den Server senden und zum nächsten Abschnitt wechseln kann. Ich werde das zum Beispiel vereinfachen:
my-element.js :
my-element.html :
parent-view-model.js :
parent-view-model.html :
Eine Demo finden Sie unter (app.js und app.html repräsentieren parent-view-model.js und parent-view-model.html):
Es funktioniert! So'ne Art. Leider scheint this an my-element anstatt an parent-view-model gebunden zu sein. In diesem Beispiel wird also Folgendes in die Konsole gedruckt: parent property: undefined . Das wird nicht funktionieren.
Ich weiß, dass ich den EventAggregator verwenden kann, um die Kommunikation zwischen dem benutzerdefinierten Element und dem Ansichtsmodell zu erleichtern, aber wenn ich helfen kann, möchte ich die zusätzliche Komplexität vermeiden.
Sie haben zwei Möglichkeiten dafür. Sie können dies mit benutzerdefinierten Ereignissen oder mit der Bindung call erledigen, die Anj in seiner Antwort erwähnt hat. Welche Sie verwenden, hängt von Ihrem tatsächlichen Anwendungsfall ab.
Wenn das benutzerdefinierte Element in der Lage sein soll, eine Methode auf der übergeordneten VM aufzurufen und Daten out des benutzerdefinierten Elements zu übergeben, sollten Sie ein benutzerdefiniertes Ereignis verwenden, wie in diesem Punkt dargestellt: < a href="https://gist.run/?id=ec8b3b11f4aa4232455605e2ce62872c"> Ссылка :
app.html:
%Vor%app.js:
%Vor%mein-element.html:
%Vor%mein-element.js:
%Vor% Sie würden grundsätzlich alle Daten anhängen, die Sie benötigen, um die Eigenschaft detail des benutzerdefinierten Ereignisses weiterzugeben. In der Event-Binding-Deklaration würden Sie der Funktion $event als Parameter hinzufügen und dann die detail -Eigenschaft von $ event in Ihrem Event-Handler überprüfen (Sie könnten auch $event.detail übergeben, wenn Sie möchten).
Wenn das benutzerdefinierte Element in der Lage sein soll, eine Methode auf Ihrer übergeordneten VM aufzurufen und Daten von der übergeordneten VM (oder von einem anderen benutzerdefinierten Element oder etwas) übergeben zu bekommen, sollten Sie die call -Bindung verwenden. Sie können Argumente angeben, die an die Methode übergeben werden, indem Sie sie in der Bindungsdeklaration angeben ( foo.call="myMethod(myProperty)" . Diese Argumente stammen aus dem VM-Kontext, in dem die Bindung deklariert wird, nicht von der VM des benutzerdefinierten Elements).
Ich konnte das Problem lösen, nachdem ich ein wenig durch den aurelia docs Hub geschleppt hatte. Ich kenne nicht alle möglichen Nuancen, aber für dieses einfache Beispiel konnte ich es mit der folgenden einfachen Änderung beheben:
Ändern Sie in parent-view-model.html (oder app.html im gist-run-Beispiel) save.bind="parentMethod" in save.call="parentMethod()"
Ich bin mir immer noch nicht sicher, wie ich Daten aus dem benutzerdefinierten Element in die Methode des übergeordneten Ansichtsmodells übergeben kann.
Tags und Links javascript aurelia aurelia-binding aurelia-framework aurelia-templating