Aurelia dynamic binding

Question

Я создал пользовательский элемент, который генерирует табличные данные. По уважительным причинам, это создает фактический HTML и вставляет в DOM без использования шаблона.

Мне нужно прикрепить наблюдатели кликов к определенным элементам, чтобы я мог запускать функцию в пользовательском элементе в ответ на щелчок. Если вы используете шаблон, я бы использовал click.delegate, но я не могу использовать его с созданным HTML.

Как вы прикрепляете обработчик событий с Aurelia, кроме как с помощью jQuery?

Answer 1

Я знаю, что этот ответ запаздывает, но в случае, если это не было (должным образом) решил еще и/или кто-то считает, что это в будущем:

Для того, чтобы сделать любое поведение Aurelia работу в динамически HTML, вам нужно компилировать что HTML.

Я работал на пользовательский элемент (на основе как Аурелии enhance и compose работы), что позволяет передавать в строке HTML и затем будет составлен, так что любые формы поведения, такие как bindables, пользовательские элементы/атрибуты просто работай. Он также будет повторно компилироваться при изменении html.

Вот пример: 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/динамический-HTML. ts

import { 
    customElement, 
    TaskQueue, 
    bindable, 
    ViewCompiler, 
    ViewSlot, 
    View, 
    ViewResources, 
    Container, 
    ViewFactory, 
    inlineView, 
    inject, 
    DOM 
} from "aurelia-framework"; 

@customElement("dynamic-html") 
@inlineView("<template><div></div></template>") 
@inject(DOM.Element, TaskQueue, Container, ViewCompiler) 
export class DynamicHtml { 
    @bindable() 
    public html: string; 

    public element: HTMLElement; 

    private tq: TaskQueue; 
    private container: Container; 
    private viewCompiler: ViewCompile; 

    private runtimeView: View; 
    private runtimeViewSlot: ViewSlot; 
    private runtimeViewFactory: ViewFactory; 
    private runtimeViewAnchor: HTMLDivElement; 

    constructor(element, tq, container, viewCompiler) { 
     this.element = <HTMLElement>element; 
     this.tq = tq; 
     this.container = container; 
     this.viewCompiler = viewCompiler; 
    } 

    public bindingContext: any; 
    public overrideContext: any; 
    public bind(bindingContext: any, overrideContext: any): void { 
     this.bindingContext = bindingContext; 
     this.overrideContext = overrideContext; 

     if (this.html) { 
      this.htmlChanged(this.html, undefined); 
     } 
    } 

    public unbind(): void { 
     this.disposeView(); 

     this.bindingContext = null; 
     this.overrideContext = null; 
    } 

    public needsApply: boolean = false; 
    public isAttached: boolean = false; 
    public attached(): void { 
     this.runtimeViewAnchor = this.element.firstElementChild; 

     this.isAttached = true; 
     if (this.needsApply) { 
      this.needsApply = false; 
      this.apply(); 
     } 
    } 

    public detached(): void { 
     this.isAttached = false; 

     this.runtimeViewAnchor = null; 
    } 

    private htmlChanged(newValue: string, oldValue: void): void { 
     if (newValue) { 
      if (this.isAttached) { 
       this.tq.queueMicroTask(() => { 
        this.apply(); 
       }); 
      } else { 
       this.needsApply = true; 
      } 
     } else { 
      if (this.isApplied) { 
       this.disposeView(); 
      } 
     } 
    } 

    private isApplied: boolean = false; 
    private apply(): void { 
     if (this.isApplied) { 
      this.disposeView(); 
     } 

     this.compileView(); 
    } 

    private disposeView(): void { 
     if (this.runtimeViewSlot) { 
      this.runtimeViewSlot.unbind(); 
      this.runtimeViewSlot.detached(); 
      this.runtimeViewSlot.removeAll(); 
      this.runtimeViewSlot = null; 
     } 

     if (this.runtimeViewFactory) { 
      this.runtimeViewFactory = null; 
     } 

     if (this.runtimeView) { 
      this.runtimeView = null; 
     } 

     this.isApplied = false; 
    } 

    private compileView(): void { 
     this.runtimeViewFactory = createViewFactory(this.viewCompiler, this.container, this.html); 

     this.runtimeView = createView(this.runtimeViewFactory, this.container); 

     this.runtimeViewSlot = createViewSlot(this.runtimeViewAnchor); 
     this.runtimeViewSlot.add(this.runtimeView); 
     this.runtimeViewSlot.bind(this.bindingContext, this.overrideContext); 
     this.runtimeViewSlot.attached(); 

     this.isApplied = true; 
    } 

} 

function createViewFactory(viewCompiler: ViewCompiler, container: Container, html: string): ViewFactory { 
    if (!html.startsWith("<template>")) { 
     html = `<template>${html}</template>`; 
    } 
    let viewResources: ViewResources = container.get(ViewResources); 
    let viewFactory = viewCompiler.compile(html, viewResources); 
    return viewFactory; 
} 

function createView(viewFactory: ViewFactory, container: Container): View { 
    let childContainer = container.createChild(); 
    let view = viewFactory.create(childContainer); 
    return view; 
} 

function createViewSlot(containerElement: Element): ViewSlot { 
    let viewSlot = new ViewSlot(containerElement, true); 
    return viewSlot; 
}