javascript - 如何使用 ViewCompiler 手动编译部分 DOM？

Question

假设我有一个简单的 View 模型 (widget.js):

import {Behavior} from 'aurelia-framework';

export class Widget
{
    static metadata() { return Behavior.customElement('widget') }

    constructor()
    {
        this.title= "AwesomeWidget";
    }
}

使用以下 View :(widget.html):

<template>
    <div>${title}</div>
</template>

现在假设我将这样的标记注入(inject)到 DOM 中:

    var markup       = `<div><widget></widget></div>`;
    var $markup      = $(markup);
    var $placeholder = $("#placeholder");

    $placeholder.append($markup);

我现在如何告诉 Aurelia 针对 Widget 的新实例编译这个新添加的 DOM 部分？我知道它涉及 ViewCompiler 但需要一个示例来帮助我。我将不胜感激任何帮助。谢谢!

Answer 1

几个月前，TemplatingEngine 类获得了一个新的可访问增强 API 方法。这减少了手动使用 viewCompiler 和编译方法的需要，这原本是唯一简单的方法。 This blog post详细介绍了如何使用增强 API 来 Aureliaify 动态添加页面中的 HTML。

这有一个额外的好处，即不需要清理编译后的 HTML 或分离任何东西。