Question

假设我有一个简单的视图模型（ widget.js ）：

import {Behavior} from 'aurelia-framework';

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

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

使用以下视图：（ widget.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，但需要一个例子来帮助我。我非常感谢任何帮助。谢谢！

Answer 1

以下是一个例子：https://gist.run/?id=762c00133d5d5be624f9

它使用Aurelia的视图编译器来编译html并创建一个绑定到提供的视图模型的视图实例。

查看-factory.js

import { inject, ViewCompiler, ViewResources, Container, ViewSlot, createOverrideContext } from 'aurelia-framework'; @inject(ViewCompiler, ViewResources) export class ViewFactory { constructor(viewCompiler, resources, container) { this.viewCompiler = viewCompiler; this.resources = resources; this.container = container; } insert(containerElement, html, viewModel) { let viewFactory = this.viewCompiler.compile(html); let view = viewFactory.create(this.container); let anchorIsContainer = true; let viewSlot = new ViewSlot(containerElement, anchorIsContainer); viewSlot.add(view); view.bind(viewModel, createOverrideContext(viewModel)); return () => { viewSlot.remove(view); view.unbind(); }; } }

<强>用法：

let view = this.viewFactory.insert(containerElement, viewHtml, viewModel);

Answer 2

几个月前，TemplatingEngine类获得了一个新的可访问的增强API方法。这简化了手动使用viewCompiler和compile方法的需要，这是最初唯一简单的方法。 This blog post详细说明了如何在页面中使用增强API Aureliaify动态添加HTML。

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

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

2 个答案: