1

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

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

在此示例中，我创建了 2 个视图模型并将其绑定到我们的自定义元素。用来告诉aureliaas-element="compose"我已经创建了视图模型并且 Aurelia 不应该创建 VM。这些与自定义元素的区别在于无容器标签：

  1. CustomElement@containerless在 Viewmodel 中没有标签，但在 HTML 视图中有“无容器”。

  2. withattr 组件在 HTML 视图中没有“无容器”，但它@containerless在 Viewmodel 中有标签，如 Aurelia HUB 中所述。

我希望在这两种情况下我都会看到一个蓝色矩形。由于无容器标签，customelement 标签被 Aurelia 剥离。但是该@containerless标签似乎不起作用，如在实现 2 中一样。

问题： 任何线索为什么这些实现有不同的输出？哪个是正确的？我希望 2，如 Aurelia Docs 中所述，@containerless标签应放置在视图模型上。

任何帮助，将不胜感激 ：）

4

1 回答 1

0

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

发生的事情是装饰器应用于您的withattr元素，但as-element="compose"将其转换为compose引擎盖下的元素。然后，该compose元素没有@containerless应用标签。

同样，你的customelement你实际上不是应用@containerless到customelement，而是应用到compose它变成的那个。

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

请注意，除非没有其他方法可以完成某些事情，否则不建议使用@containerlesswith ，例如在元素内使用自定义元素。as-elementtable

为什么不简单地compose在您的自定义元素中添加一个，并通过自定义元素上的可绑定属性将路径绑定到视图？

编辑

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

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

也可以肯定您需要@containerless. 你需要它@containerless在compose元素上。

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

作为个人喜好，我会这样做：

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

而不是这个：

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

为了更灵活地使用动态视图，请更清楚地表明我们正在使用compose，而不必使用<require>视图。但这真的归结为偏好和其他要求。

于 2016-09-27T15:20:42.697 回答