Aurelia - Zugreifen auf ViewModel-Funktionen/Bindung von generierten DOM-Elementen

Question

Ich habe einen Abschnitt meiner Ansicht (HTML), die von einem Viewmodel/Klasse programmgesteuert generiert wird. Dies verwendet die Aurelia DOM (Aurelia Docs - pal :: Dom) -Funktion zum Generieren und Hinzufügen der Raw-HTML-Elemente zur Ansicht.

Ich bin jedoch nicht in der Lage, Ereignisse innerhalb des generierten HTML zu erhalten, um zum Viewmodel zurückzurufen. Ein Beispiel:

let deleteButton = this.dom.createElement("button"); 
deleteButton.setAttribute("onclick", "cancelCreditNote(`${ row.creditNoteId }`)"); 

Ein Klick auf die Schaltfläche erzeugt werden nicht zurück auf die Ansichtsmodell nennen, die eine cancelCreditNote Funktion verfügt. Verschiedene andere Dinge wie deleteButton.setAttribute("click.delegate", "cancelCreditNote('${ row.creditNoteId }')"); funktionieren auch nicht.

Kann jemand eine Viewmodel-Klasse von essential 'Raw' HTML in Aurelia zugreifen?

Leider kann ich in diesem Fall nicht die Standard Aurelia Templating verwenden, um das HTML zu generieren.

Answer 1

Die DOM-Eigenschaft auf PAL ist nur eine Abstraktion für das DOM-Objekt des Browsers, Create-Element ruft wahrscheinlich nur document.createElement auf, was keine Aurelia-Bindung an das erstellte Element ermöglicht.

Sie könnten versuchen, aurelia.enhance(context, element) verwenden, die ein vorhandenes DOM-Element und führt es durch die Templating-Engine.

Mit dieser Methode können Sie auch einen Bindungskontext übergeben, der auf das Element angewendet wird.

Answer 2

In meinem HTML Ich benutze diese:

<div id="collapsesidebar" click.delegate="toggleSidebar()"> 

Meiner Ansicht-Modell Ich habe diese Methode:

toggleSidebar(){ 
    alert('hi'); 
} 

Sie auch dies wie dies aus Ihrer Sicht-Modell mit JQuery tun könnte:

attached() { 
    $('main').on('click',()=> alert('hi')); 
} 

die letzte Option ist nur verfügbar, nachdem die attached() Methode ausgelöst wird: vor th an der Bindung muss ihre Arbeit machen und erst danach befinden sich die Elemente innerhalb der Dom.

Mit anderen Worten: diese wird nicht funktionieren:

activate(){ 
    $('main').on('click',()=> alert('hi')); 
} 

weil die constructor und die activate Methode sowohl vor die attached Methode gefeuert werden.