1

我有一个 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>，而没有实际绑定任何属性。

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

4

2 回答 2

1

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

于 2020-02-04T15:09:20.750 回答
1

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

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

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

于 2020-02-05T12:44:47.603 回答