2016-03-31 8 views
1

Ich habe ein benutzerdefiniertes Element erstellt, das Tabellendaten generiert. Aus guten Gründen generiert dies den eigentlichen HTML-Code und fügt ihn ohne Verwendung einer Vorlage in das DOM ein.Aurelia dynamische Bindung

Ich muss Klickbeobachter an bestimmte Elemente anhängen, um eine Funktion im benutzerdefinierten Element als Reaktion auf einen Klick ausführen zu können. Wenn ich eine Vorlage verwende, würde ich click.delegate verwenden, aber ich kann das nicht mit generiertem HTML verwenden.

Wie hängt man einen Event-Handler mit Aurelia anders als mit jQuery?

+2

Sie könnten versuchen, Ereignisdelegierung zu verwenden, indem Sie den Ereignishandler an das übergeordnete Element und nicht an den generierten HTML-Code anhängen. Löst das dein Problem? –

Antwort

4

Ich weiß, diese Antwort zu spät ist, aber falls dieser (richtig) wurde nicht gelöst noch und/oder jemand anderes findet diese in der Zukunft:

Um in jede aurelia Verhalten Arbeit zu machen dynamisch generierte HTML, müssen Sie das HTML kompilieren.

ich auf einem benutzerdefinierten Element gearbeitet haben (je nachdem, wie enhance und compose Arbeit aurelia), die Sie in einer Reihe von HTML passieren lässt, und es wird dann kompiliert werden, so dass alle wie bindables Verhaltensweisen, benutzerdefinierte Elemente/Attribute arbeite nur. Es wird auch neu kompiliert, wenn sich der HTML-Code ändert.

Hier ist ein Beispiel: https://gist.run?id=1960218b52ba628f73774822aef55ad7

src/app.html

<template> 
    <dynamic-html html.bind="dynamicHtml"></dynamic-html> 
</template> 

src/app.ts

export class App { 
    public dynamicHtml: string = ` 
<button click.delegate="handleClick()">Click me</button> 
`; 

    public handleClick(): void { 
    alert("Hello!") 
    } 
} 

src/dynamic-html. ts