组件模型标记中的 Aurelia 组件插槽

Question

我正在构建一个自动完成组件。计划是我可以为我知道组件将绑定到的内容插入一些标记。

想法是这可以是任何对象而不是简单的显示值和标识符。

我使用模板进行了此工作，但我想知道是否有更好的方法。

到目前为止它看起来像这样（options 现在在组件模型中是硬编码的）：

// Usage:
<autocomplete>
  <template replace-part="item">
    //this is the content for each option within the component
    <b>${option.lastName}<b/>, ${option.firstName}  
  </template>
</autocomplete>

//autocomplete 
<template>
  <input type="text" placeholder="Type 3 characters ...">
  <ul>
    <li repeat.for="option of options">
      <template replaceable part="item"></template>
    </li>
  </ul>
</template>

我不太喜欢模板样板，slot 更好，有没有办法让 slot 像这样工作？

<autocomplete>
    <li repeat.for="option of options">
        ${option.lastName}<b/>, ${option.firstName}
    <li/>
</autocomplete>

//autocomplete 
<template>
  <input type="text" placeholder="Type 3 characters ...">
  <ul>
    <slot></slot>
  </ul>
</template>

Answer 1

Aurelia 中的插槽是基于标准规范的仿真，这意味着它不适用于重复情况。 repaceable 被引入来处理这种情况，我认为我们没有任何其他选择。有时感觉很奇怪，但只要有一点文档，你和你的团队可能就没事了。您可以做的是对于每个替换项，它可以查找哪些属性来获取该项目。

组件模型标记中的 Aurelia 组件插槽

Aurelia component slotting in markup for components model

aurelia