Avoiding HTML duplication with mustache templates

221 views Asked by At

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

There are 0 answers