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

假设我有一个简单的视图模型（小部件.js):

import {Behavior} from 'aurelia-framework';

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

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

具有以下观点：（小部件.html):

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

现在假设我将一些像这样的标记注入到 DOM 中：

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

    $placeholder.append($markup);

我现在如何告诉 Aurelia 根据 Widget 的新实例编译 DOM 的这个新添加的部分？我知道它涉及 ViewCompiler 但需要一个示例来帮助我。我将非常感谢任何帮助。谢谢！

几个月前，TemplateEngine 类获得了一个新的可访问的增强 API 方法。这样就不需要手动使用viewCompiler和compile方法了，这本来是唯一简单的方法。这篇博文 http://ilikekillnerds.com/2016/01/enhancing-at-will-using-aurelias-templating-engine-enhance-api/详细介绍了如何使用增强 API 来 Aureliaify 在页面中动态添加 HTML。

这样做的另一个好处是不需要清理已编译的 HTML 或分离任何内容。