Aurelia綁定行為如何可以增強innerHTML內容？

Question

在我的網絡應用中，我正在使用Markdown值轉換器來顯示Markdown字符串中的HTML，例如

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

這很好用，在div內，我得到了Markdown內容的HTML呈現形式，它為string 。

值轉換器能夠在輸出中呈現Aurelia自定義元素，但是作為值轉換器輸出中的該元素作為字符串，Aurelia的模板引擎並未對其進行增強。

每當源值更改時，綁定行為是否能夠使用TemplatingEngine增強值轉換器在DOM中呈現后的輸出？ 就像是：

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

我已經嘗試過了，但是它不起作用（在target獲得其子級之前正在對其進行評估）：

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）答案的啟發，我創建了以下自定義屬性：

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

}

Answer 2

在綁定實例將模型值應用於目標元素 之前，將立即調用綁定行為的bind方法，這說明了div的子代尚不存在的原因- string | markdown 綁定表達式的string | markdown部分尚未應用。

我認為aurelia自定義屬性將更適合此用例。 就像是：

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

甚至：

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

這兩種方法都可以使您更好地控制過程。