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获得它的孩子之前被评估）：

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

我认为aurelia自定义属性更适合此用例。类似的东西：

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

甚至：

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

这些都可以让你更好地控制这个过程。

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

2 个答案: