If I have several components (individual '.mustache' files) which I want to import as partials into a main template and those components have an identical containing <div>
, can you code it in a way that avoids having repetition across the components?
<div class="Component">
<h3>Component One</h3>
<p>Lorem ipsum...</p>
</div>
<div class="Component">
<h3>Component Two</h3>
<p>Dolor sit amet...</p>
</div>
The common container <div class="Component">
is duplicated in each file which seems inefficient but I'm not sure how to avoid the duplication.
So I have a template called 'home.mustache' and it has:
<div class="Main">
Some content
</div>
<div class="Sidebar">
{{> component1 }}
{{> component2 }}
</div>
I guess something that in my head is like this, but the compontent-container spits out opening and closing markup (then I can remove the container from each component):
<div class="Sidebar">
{{# component-container }}
{{> component1 }}
{{/ component-container }}
{{# component-container }}
{{> component2 }}
{{/ component-container }}
</div>