我应该如何使用 ractive 设计通用容器组件？

Question

我想用 ractive 创建手风琴 ui。我可以使用具有静态内容的基本模板来执行此操作，但我不明白如何将模板变成可重用的通用组件。

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

<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 做到这一点。您所要做的就是制作这些 "wrapper components" 并将 {{ 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 获取数据的位置。收益率将是更好的选择。

我应该如何使用 ractive 设计通用容器组件？

How should I design generic container components with ractive?

ractivejs