Я создаю компонент автозаполнения.План состоит в том, чтобы я мог вставить некоторую разметку для того, что, как я знаю, будет связываться с компонентом.
Идея состоит в том, что это может быть любой объект, а не просто отображаемое значение и идентификатор.
У меня это работает с использованием шаблонов, но мне интересно, есть ли лучший подход.
Пока это выглядит так (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>
Мне не очень нравится шаблонный шаблон, слоты намного приятнее, есть ли способ заставить слоты работать так?
<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>