Javascript 使用'时的差异@无集装箱'；关于虚拟机和'；无集装箱'；在自定义元素的HTML视图中_Javascript_Aurelia_Aurelia Templating

Javascript 使用'时的差异@无集装箱'；关于虚拟机和'；无集装箱'；在自定义元素的HTML视图中

javascript aurelia

Javascript 使用'时的差异@无集装箱'；关于虚拟机和'；无集装箱'；在自定义元素的HTML视图中,javascript,aurelia,aurelia-templating,Javascript,Aurelia,Aurelia Templating,我在为aurelia组件使用无容器功能时看到了奇怪的行为。我们正在为SVG容器中的创建自定义元素，这要求我们在将自定义元素标记添加到DOM之前使用无容器标记剥离自定义元素标记，因为SVG容器中只允许使用SVGElements标记。我们正在使用Aurelia发行版1.0.0，并使用webpack构建我们的SPA 在这里，您可以找到一个gistrun示例，其中显示了无容器用法的2个实现。在本例中，我创建了2个viewmodels，并将其绑定到自定义元素。使用as element=“compos

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

在这里，您可以找到一个gistrun示例，其中显示了无容器用法的2个实现。

在本例中，我创建了2个viewmodels，并将其绑定到自定义元素。使用

as element=“compose”

告诉aurelia我已经创建了viewmodel，并且aurelia不应该创建VM。这些元素与自定义元素的区别在于无容器标记：

CustomElement在Viewmodel中没有

@containerless

标记，但在HTML视图中有“containerless”

withattr组件在HTML视图中没有“无容器”，但在Viewmodel中有

@containerless

标记，如Aurelia HUB中所述

我希望在这两种情况下，我都会看到一个蓝色的矩形。由于无容器标记，Aurelia剥离了customelement标记。但是，

@containerless

标记似乎不起作用，如实现2中所示

问题： 有没有线索说明为什么这些实现有不同的输出？哪个是正确的？我希望2，正如Aurelia文档中所述，

@containerless

标记应该放在viewmodel上

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

无容器装饰器直接在您放置它的元素上工作

现在的情况是，decorator被应用于

withattr

元素，但是

as element=“compose”

会将它变成引擎盖下的

compose

元素。然后，此

compose

元素没有应用

@containerless

标记

同样，对于

customelement

，您实际上并没有将

@containerless

应用于

customelement

，而是应用于它变成的

compose

删除

as element=“compose”

部分，只需在标记中声明您的

元素为裸元素，

无容器的

将起作用，因为实际的元素仍然是

with attr

请注意，不建议将

@containerless

与

一起用作元素

，除非没有其他方法来完成某些事情，例如在

表

元素中使用自定义元素

为什么不在自定义元素中简单地使用

compose

，并通过自定义元素上的可绑定属性将路径绑定到视图

编辑

抱歉，我忽略了一个事实，即您希望指定自己的ViewModel实例

此要求限制您使用

compose

元素，因为这是Aurelia支持提供自己的ViewModel实例的唯一方法

当然，您还需要

@containerless

。您需要

@containerless

位于

compose

元素上

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

出于个人喜好，我会这样做：

与此相反：

为了更灵活地使用动态视图，请更清楚地说明我们使用的是

compose

，而不是

视图。但这实际上归结为偏好和其他要求。

无容器装饰器直接作用于放置它的元素