我应该如何设计具有ractive的通用容器组件？

Question

我想用ractive创建一个手风琴ui。我可以使用带有静态内容的基本模板来完成此操作，但我不明白如何将模板转换为可重用的通用组件。

如果我用代码解释可能会更容易。基本上，我希望能够像这样编写代码 ：

<my-accordian>
     <my-accordian-section header="section one">
         <my-other-component-a foo="apple" one="1">
         <my-other-component-b foo="banana" two="2">
     </my-accordian-section>
     <my-accordian-section>
         <my-other-component-c foo="apple" one="1">
         <my-other-component-d foo="banana" two="2">
     </my-accordian-section>
</my-accordian>

实现这样的目标的最佳途径是什么？

Answer 1

您可以使用yields执行此操作。您所要做的就是制作那些“包装器组件”并将{{ yield }}分配给您希望内部html出现的位置。

我-accordian.html

<div class="accordion">
  {{yield}} <!-- anything between <my-accordian></my-accordian> --> goes here
</div>

我-手风琴-section.html

<div class="accordion-section">
  <div class="accordion-header">
    <h3>{{ header }}</h3> <!-- the header property you passed in goes here -->
  </div>
  <div class="accordion-content">
    {{ yield }} <!-- anything between <my-accordian-section></my-accordian-section> --> goes here
  </div>
</div>

您可以使用{{> content }}执行相同的操作，但不同之处在于内部html获取数据的位置。收益率将是更好的选择。