2

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

4

2 回答 2

3

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

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

于 2016-01-29T00:28:05.700 回答
3

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

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

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

用法：

let view = this.viewFactory.insert(containerElement, viewHtml, viewModel);
于 2015-08-23T11:38:04.367 回答