javascript - 在 VM 上使用 '@containerless' 和在自定义元素的 HTML View 中使用 'containerless' 时的差异

Question

在对 aurelia 组件使用无容器功能时，我看到了奇怪的行为。我们正在 SVG 容器中创建自定义元素，这要求我们在将自定义元素标签添加到 DOM 之前使用无容器标签来剥离自定义元素标签，因为 SVG 容器中只允许使用 SVGElements 标签。 我们使用 Aurelia 发行版 1.0.0 并使用 webpack 构建我们的 SPA。

在这里您可以找到一个 gistrun 示例，其中显示了无容器使用的 2 种实现。 https://gist.run/?id=58ba6282ad54c1263eec3a141fe42183

在此示例中，我创建了 2 个 View 模型并将其绑定(bind)到我们的自定义元素。使用 as-element="compose" 告诉 aurelia 我已经创建了 View 模型，并且 Aurelia 不应该创建虚拟机。这些与自定义元素之间的区别在于无容器标签:

1. CustomElement 在 Viewmodel 中没有 @containerless 标记，但在 HTML View 中具有“containerless”。

2. withattr 组件在 HTML View 中没有“containerless”，但在 Viewmodel 中确实有 @containerless 标记，如 Aurelia HUB 中所述。

我希望在这两种情况下我都会看到一个蓝色矩形。由于无容器标签，Aurelia 删除了自定义元素标签。但是，@containerless 标记似乎不起作用，如实现 2 中所示。

问题: 知道为什么这些实现有不同的输出吗？ 哪一个是正确的？我希望是 2，正如 Aurelia 文档中所述，@containerless 标签应放置在 View 模型上。

如有任何帮助，我们将不胜感激:)

Answer 1

@containerless装饰器直接作用于您放置它的元素。

发生的事情是装饰器应用于您的 withattr元素，但是as-element="compose"将其变成 compose引擎盖下的元素。这个compose那么元素就没有 @containerless已应用标签。

同样，您的 customelement您实际上没有申请 @containerless至customelement ，但是到compose它变成了。

删除as-element="compose"部分并简单地声明您的 <withattr/>标记中裸露的元素，以及 containerless会起作用，因为实际元素仍然是 withattr .

请注意，不建议使用 @containerless与 as-element除非没有其他方法可以完成某件事，就像在 table 中使用自定义元素的情况一样元素。

为什么不简单地拥有一个 compose在您的自定义元素内，并通过自定义元素上的可绑定(bind)属性将路径绑定(bind)到 View ？

编辑

抱歉，我有点忽略了您想要指定自己的 ViewModel 实例的事实。

此要求限制您只能使用 compose元素，因为这是 Aurelia 支持提供您自己的 ViewModel 实例的唯一方式。

也可以肯定的是，您需要 @containerless 。你需要那个@containerless位于 compose元素。

结论，从技术 Angular 来看，您的第一个解决方案似乎非常好。

根据个人喜好，我会这样做:

<compose containerless view.bind="'./customelement.html'" view-model.bind="customElementViewModel"/>

而不是这个:

<customelement containerless as-element="compose" view-model.bind="customElementViewModel"/>

为了使动态 View 更加灵活，请更清楚地表明我们正在使用 compose ，并且不必<require>风景。但这实际上可以归结为偏好和其他要求。