Aurelia

Question

我有一个 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> 的自定义元素？

Answer 1

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

Answer 2

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

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

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

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

Aurelia - dynamically create custom element in a view-model

aurelia-templating