Javascript 使用自定义元素内容作为项目模板

我正在为我们的内部框架编写可重用组件，这些组件抽象出一些猴子代码。大多数场景都是用插槽实现的，效果很好。然而，有些场景需要在for循环中使用渲染模板，不幸的是，这里不支持插槽

我想出了以下（工作）代码：

这种方法的优点是，您可以使用一个默认插槽创建复杂的“根”自定义元素。在这个窗口中，您可以定义多个自定义的“子”元素，根元素在初始化时可以搜索这些元素（我知道您可以使用@child和@children装饰器来完成这项工作，所以这部分已经包括在内）。但是，对于如何在我的根自定义元素中使用这些自定义子元素的内容，我有点不知所措。。在上面的示例中，我将如何获取

span

元素，并准备它的内容在转发器中呈现？是否可以将重复的

项

设置为模板的数据源，这样我就不必在模板中指定

项

？

---

我希望我没有说得太详细，但我想解释一下我的功能需求是什么。如果您有任何资源可以为我指出正确的方向，我将非常感激

使用

processContent

属性将元素内容转换为零件替换。组件仍将在内部使用replace part，但组件的使用者不会暴露于此实现细节

picker.html

${item}

picker.js

从'aurelia templating'导入{bindable，processContent}；
从“aurelia binding”导入{bindingMode}；
从'aurelia pal'导入{FEATURE}；
@processContent（makePartReplacementFromContent）
导出类选择器{
@bindable itemsSource=null；
@bindable（{defaultBindingMode:bindingMode.twoWay}）值=null；
}
函数makePartReplacementFromContent（视图编译器、视图资源、元素、行为指令）{
常量内容=element.firstElementChild；
如果（内容）{
//创建
const template=document.createElement（'template'）；
//支持没有真实元素实现（IE）的浏览器
FEATURE.ensureHTMLTemplateElement（模板）；
//指明要替换的零件。
setAttribute（'replace-part'，'item-template'）；
//将元素的内容替换为
元素。insertBefore（模板、内容）；
元素。removeChild（内容）；
template.content.appendChild（content）；
返回true；
}
}

用法

默认项模板
自定义项目模板
${item}

是的，转发器和其他模板控制器内部不支持插槽是一个真正的问题。。。不幸的是，标准的编写方式需要它，这也是为什么我们有

可替换的
东西作为绕过
插槽
故障的方法。这让我走上了正确的方向，感谢您提供了完整的示例！现在，我使用processcontent函数扫描自定义子元素并附加replace part位，只要它在内部使用，我就不在乎。本例中唯一缺少的是'item'位，我通过在模板中使用with.bind=“item”绑定解决了这个问题
<template>
  <div class="form-group">
    <label for.bind="titleSafe" class="control-label">{title}</label>
    <select id.bind="titleSafe" value.bind="value" class="form-control">
      <option repeat.for="item of itemsSource" >
        <template replaceable part="item-template" containerless>${item}</template>
      </option>
    </select>
  </div>
</template>

<template>
  <div class="form-group">
    <label for.bind="titleSafe" class="control-label">{title}</label>
    <select id.bind="titleSafe" value.bind="value" class="form-control">
      <option repeat.for="item of itemsSource" >
        <!-- I want to insert my custom element here -->
      </option>
    </select>
  </div>
  <slot></slot>
</template>

<select-item title="myTitle" items-source="myItems">
  <select-item-template><span>${myItemsProperty}</span></select-item-template>
</select-item>