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

How do you use ViewCompiler to manually compile part of the DOM?

本文关键字：DOM 一部分 编译 何使用 ViewCompiler      更新时间：2023-09-26

假设我有一个简单的视图模型（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，但需要一个例子来帮助我。如果有任何帮助，我将不胜感激。谢谢

几个月前，TemplateEngine类获得了一个新的可访问的增强API方法。这简化了手动使用viewCompiler和compile方法的需要，而这是最初唯一简单的方法。这篇博客文章详细介绍了如何使用增强的API来Aureliaify在您的页面中动态添加HTML。

这还有一个额外的好处，即不需要清理已编译的HTML或分离任何内容。

下面是一个例子：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);
相关文章：