Question

I am building an autocomplete component. The plan is that I can slot in some markup for what I know the component is going to bind to.

The idea is this could be any object rather than a simple display value and identifier.

I have this working using templates but I am wondering if there is a better approach.

So far it looks like this (options is hard coded for now within the components model):

// 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>

I don't really like the templating boilerplate, slots are much nicer, is there any way to make slots work like this?

<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 component slotting in markup for components model

1 个答案: