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

【问题标题】：How an Aurelia binding behavior could enhance an innerHTML content?Aurelia 绑定行为如何增强 innerHTML 内容？
【发布时间】：2016-05-19 14:07:41
【问题描述】：

在我的网络应用程序中，我使用 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 得到它的孩子之前正在评估它）：

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

有可能吗？

【问题讨论】：

标签： javascript html innerhtml aurelia

【解决方案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));
        }
    }

}

【讨论】：

【解决方案2】：

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

我认为 aurelia 自定义属性更适合此用例。比如：

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

甚至：

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

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

【讨论】：