Aurelia 绑定行为如何增强 innerHTML 内容？

Question

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

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

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

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

每当源值发生变化时，绑定行为是否能够使用 TemplatingEngine 增强值转换器在 DOM 中呈现后的输出？类似于：

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

我已经试过了，但它不起作用（在 target 获得它的 children 之前正在对其进行评估）：

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

绑定行为的 bind 方法被调用 immediately before the binding instance applies the model value to the target element 这解释了为什么 div 的 children 还不存在 - string | markdown 部分尚未应用绑定表达式。

我认为 aurelia 自定义属性更适合这个 use-case。类似于：

<div enhance.bind="myMarkdownString | markdown">

甚至：

<div enhanced-markdown.bind="myMarkdownString">

其中任何一个都可以让您更好地控制流程。

Answer 2

受 Jeremy 回答的启发，我制作了这个自定义属性：

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));
        }
    }

}

Aurelia 绑定行为如何增强 innerHTML 内容？

How an Aurelia binding behavior could enhance an innerHTML content?

html

javascript

innerhtml

aurelia