Aurelia - 在视图模型中动态创建自定义元素答案

【问题标题】：Aurelia - dynamically create custom element in a view-modelAurelia - 在视图模型中动态创建自定义元素
【发布时间】：2020-05-19 18:12:27
【问题描述】：

我有一个 Aurelia 应用程序，用户可以在其中单击一个按钮并创建一个新选项卡。在用户单击按钮之前，该选项卡及其内容（自定义元素）在页面上不存在。我正在运行时（通过 Javascript）在我的视图模型中为内容生成 HTML。

我不断看到有人提到使用模板引擎的 compose 或 enhance 函数，但它们都不适合我。我不知道如何使用 <compose> 元素（在我的 HTML 中），因为我是根据用户单击按钮来创建元素的。

我的想法是该按钮有一个 click.delegate 到一个最终会执行类似操作的函数

const customElement = document.createElement('custom-element');
parentElement.appendChild(customElement);

const view = this.templatingEngine.enhance({
  element        : customElement,
  container      : this.container, // injected
  resources      : this.viewResources, // injected
  bindingContext: {
    attrOne: this.foo,
    attrTwo: this.bar,
  }
});

view.attached();

但这所做的只是创建一个 HTML 元素 <custom-element></custom-element> 而不实际绑定任何属性。

如何通过 Javascript 创建类似于 <custom-element attr-one.bind="foo" attr-two.bind="bar"></custom-element> 的自定义元素？

【问题讨论】：

标签： aurelia aurelia-templating

【解决方案1】：

我发现了问题 =\ 我必须让我的自定义元素成为全局资源。

【讨论】：

【解决方案2】：

正如您在自己的回答中指出的那样，是缺少资源导致了问题。一种解决方案是全局注册它。但是，这并不总是理想的行为，因为有时您想延迟加载资源并增强一些延迟的 HTML。 Enhance API 接受用于编译视图的资源的选项。所以你可以这样做：

.enhance({
  resources: new ViewResources(myGlobalResources) // alter the view resources here
})

对于视图资源，如果你想从一个特定的自定义元素中获取它，你可以挂钩到创建的生命周期并获取它，或者你可以注入容器并通过container.get(ViewResources)检索它

【讨论】：