How should I design generic container components with ractive?

Question

I want to create an accordian ui with ractive. I could do this with a basic template with static content, but I don't understand how to turn the template into a re-usable generic component.

It may be easier if I explain with code. Basically, I want to be able to write code something like this:

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

What's the best way to achieve something like this?

Answer 1

You can do that with yields. All you have to do is make those "wrapper components" and assign {{ yield }} to where you want the inner html to appear.

my-accordian.html

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

my-accordian-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>

You can do the same thing with {{> content }} but the difference lies in where the inner html gets it's data. Yields would be the better option here.