Aurelia: Programmgesteuert ändernder Referenzwert ändert nicht Modell

Question

Wir haben eine Situation, in der wir eine Komponente in mehreren Webseiten verwenden (ein Notizeditor). Dieser Notizeditor nimmt einen Wert von einem Eingabeelement auf der Seite und legt diesen Wert in eine Komponente, in der der Benutzer sie ändern kann. Der Benutzer tippt den Notizeneditor ein und klickt auf Senden. Die Noteneditorkomponente übergibt den neuen Wert dann an die Eingabe auf der ursprünglichen Seite zurück.

Wir verwenden die "Ref", um den Wert hin und her zu übergeben. Alles funktioniert einwandfrei, außer dass das Modell nicht aktualisiert wird, wenn wir den Wert des Referenzelements aus der Noteneditorkomponente festlegen. Wir finden, dass wir einmal tippen müssen, damit das Modell aktualisiert wird. Hier ist ein einfacher Gist, um unser Beispiel zu illustrieren:

Dies ist nur ein einfaches Beispiel für das programmatische Festlegen des ref-Wertes. Beachten Sie, wie "Der Wert meiner Eingabe ist" bleibt wie "Hallo", aber das Eingabefeld ändert sich zu "Wert geändert !!!!" wenn Sie den Knopf drücken.

https://gist.run/?id=fab025d6b99a93f9951b1a6e20efeb5e

Ein paar Dinge zu beachten: 1) Wir möchten Aurelia "ref" anstelle eines "id" oder "name" verwenden. 2) Wir haben versucht, das Modell anstelle des "ref" zu übergeben. Wir können den Wert des Modells erfolgreich abrufen und in den Notizeditor stellen, aber das Modell wird nicht aktualisiert, wenn wir es zurückgeben.

UPDATE:

Wir haben eine Antwort (vielen Dank!). Hier ist der Code, den wir versuchten, um das Modell zu übergeben (so dass wir nicht einmal den Verweis verwenden müssten). Das ist für uns gescheitert. Hier

ist die Ansicht des seite.html

<TextArea value.bind="main.vAffectedClients" style="width:94%;" class="editfld" type="text" rows="6"></TextArea> 
<input class="butn xxsBtn" type="button" value="..." click.trigger="OpenNoteDivAurelia(main.vAffectedClients)" /> 

Hier wird der View-Modell der page.js

import {NoteEditor} from './SmallDivs/note-editor'; 
... 
@inject(NoteEditor, ...) 
export class PageName { 
    constructor(NoteEditor, ...) 
    { 
    this.note = NoteEditor; 
    ... 
    } 


    OpenNoteDivAurelia(myTargetFld) 
    { 
    this.note.targetFld = myTargetFld; 
    this.note.vHidTextArea.value = myTargetFld; 
    this.note.show(); 
    } 
} 

Dieser Teil unserer Komponente öffnet (Note-Editor) und erfolgreich Platziert den targetFld-Wert in unserer TextArea in der Komponente. Hier

ist der View-Modell, wenn der Wert der Einbringung zu page.js/seite.html

CloseNote(populateFld) 
    { 
     if (populateFld) 
     { 
     //This is the line that doesn't seem to work 
     this.targetFld = vHidTextArea.value; 
     } 
     this.isVisible = false; 
    } 

Diese letzte Funktion „CloseNote“ ist derjenige, der nicht funktioniert. Das Modell (von dem wir glauben, dass es auf this.targetFld verweist) erhält nicht den Wert des Textfelds. Es ist kein Fehler, es tut einfach nichts.

Answer 1

Die Ereignisse, die Aurelia anfügt, um über eine Änderung der Eingabe benachrichtigt zu werden, werden nicht ausgelöst, wenn Sie die Eigenschaft value programmgesteuert auf eine Eingabe festlegen. Es ist jedoch einfach genug, eines dieser Ereignisse selbst zu feuern.

export class App { 
    mymodel = {"test":"Hello"}; 

    changeValByRef(myinput) 
    { 
    myinput.value = "Value Changed!!!!"; 
    myinput.dispatchEvent(new Event('change')); 
    } 

} 

Sie brauchen eigentlich nicht den Referee passieren, um die Funktion, wann immer Sie verwenden, um das ref Attribut, eine Eigenschaft, wird hinzugefügt, um Ihre VM w/den Namen, den Sie in dem ref Attribute verwenden. Also könnte das obige Beispiel unter Verwendung von this.myinput anstelle des übergebenen Objekts erreicht worden sein, da sie gleich sind.

Hier ist ein funktionierendes Beispiel: https://gist.run/?id=7f96df1217ac2104de1b8595c4ae0447

ich Interesse hätte, auf den Code zu suchen, wo Sie Probleme sind, die um das Modell übergeben.Ich könnte Ihnen wahrscheinlich helfen, herauszufinden, was schief läuft, so dass Sie nicht ref verwenden müssen, um so etwas zu erreichen.