javascript - Aurelia 绑定(bind)行为如何增强 innerHTML 内容？

Question

在我的网络应用程序中，我使用 Markdown 值转换器从 Markdown 字符串呈现 HTML，例如

<div innerhtml.bind="string | markdown"></div>

这很好用，在 div 中我得到了 string 中 Markdown 内容的 HTML 呈现。

值转换器能够在输出中呈现 Aurelia 自定义元素，但作为值转换器输出中作为字符串的元素，Aurelia 的模板引擎无法增强它。

每当源值发生变化时，绑定(bind)行为是否能够使用 TemplatingEngine 来增强在 DOM 中呈现后值转换器的输出？像这样的东西:

<div innerhtml.bind="string | markdown & enhance"></div>

我试过这个，但它不起作用(它在 target 获取它的 child 之前被评估):

export class EnhanceBindingBehavior {

    private templatingEngine: TemplatingEngine;

    public constructor(templatingEngine: TemplatingEngine) {
        this.templatingEngine = templatingEngine;
    }

    public bind(binding: Binding, scope: Scope): void {
        let target: HTMLElement = binding["target"];
        for (let i = 0; i < target.children.length; i++) {
            console.log("enhancing element " + i);
            this.enhance(target.children[i]);
        }

    }

    public unbind(binding: Binding, scope: Scope): void {

    }

    private enhance(element: Element): void {
        this.templatingEngine.enhance({
            element: element
        });
    }
}

有可能吗？

Answer 1

受 Jeremy answer 的启发，我制作了这个自定义属性:

export class EnhancedCustomAttribute {

    private templatingEngine: TemplatingEngine;

    private element: HTMLElement;

    private value: string;

    public constructor(templatingEngine: TemplatingEngine, element: Element) {
        this.templatingEngine = templatingEngine;
        this.element = <HTMLElement> element;
    }

    public valueChanged(html: string) {
        this.enhance(html);
    }

    private enhance(html: string) {
        this.element.innerHTML = html;
        for (let i = 0; i < this.element.children.length; i++) {
            this.templatingEngine.enhance(this.element.children.item(i));
        }
    }

}