How Do You Use Viewcompiler To Manually Compile Part Of The Dom?

Say I have a simple view model (widget.js): import {Behavior} from 'aurelia-framework'; export class Widget { static metadata() { return Behavior.customElement('widget') }

Solution 1:

A few months ago the TemplatingEngine class got a newly accessible enhance API method. This shortcuts the need to manually use the viewCompiler and compile method which was originally the only easy approach. This blog post details how you can use the enhance API to Aureliaify dynamically added HTML in your pages.

This has the added benefit of not needing to clean up the compiled HTML or detach anything either.

Solution 2:

Here's an example: https://gist.run/?id=762c00133d5d5be624f9

It uses Aurelia's view compiler to compile the html and create a view instance, bound to the supplied view-model.

view-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();
    };
  }
}

Usage:

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