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

Question

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

[我不断提到使用模板引擎的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

正如您在自己的答案中指出的，正是造成问题的资源不足。一种解决方案是在全球范围内注册。但是，这并不总是所需的行为，因为有时您希望延迟加载资源并增强一些懒惰的HTML。增强API接受用于编译视图的资源的选项。因此，您可以这样做：

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

对于视图资源，如果您想从特定的自定义元素中获取它，则可以进入创建的生命周期并获取它，也可以注入容器并通过container.get(ViewResources)对其进行检索>

Answer 2

我发现了问题= \，我不得不将自定义元素设置为全局资源。