在aurelia视图中动态命名多个插槽
问题描述:
在Aurelia中,我创建了一个作为容器进行交互的自定义元素。此容器在子节点周围创建一些UI元素。在aurelia视图中动态命名多个插槽
这些自定义元素可以在任何视图中使用如下:
<wizard-container ref="container">
<wizard-step title="Step 1" view-model="step1"></wizard-step>
<wizard-step title="Step 2" view-model="step2"></wizard-step>
<wizard-step title="Step 3" view-model="step3"></wizard-step>
</wizard-container>
在wizard-container
类我看了所有的孩子喜欢这个@children('wizard-step') steps = [];
和循环在他们的模板:
...
<div class="step" repeat.for="step of steps">
<slot name="step-${$index}"><p>slot-${$index}</p></slot>
</div>
...
的问题是插槽不会被创建。
我也不能任意元素添加到这些插槽这样
<template slot="slot-${idx}">
<p>hello world</p>
</template>
根据这一blog post从2016年5月的数据绑定到槽的name
属性和对slot
属性不能正常工作。
有人知道现在是否有可能或有任何解决方法的想法吗?
答
不幸的是,这是不可能的插槽。由于Shadow DOM规范的限制,不太可能。
你可以看看更换的部件,看是否可以做你需要做什么:http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/9
向下滚动一点,你会看到在更换部件的一些信息。话虽如此,我不确定这是否适合你。我从来没有尝试过使用动态命名的模板部分。
令人遗憾的是,动态命名的模板部件无法正常工作。必须找到另一个解决方案。谢谢 – iocast
@iocast命名模板部件正常工作。看看这个问题https://*.com/questions/44402632/in-aurelia-can-a-slot-be-used-in-a-repeat-for-binding/44405040 –
法比奥,那不显示动态命名的模板部分 –