Avoiding HTML duplication with mustache templates -
if have several components (individual '.mustache' files) want import partials main template , components have identical containing <div>
, can code in way avoids having repetition across 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">
duplicated in each file seems inefficient i'm not sure how avoid duplication.
so have template called 'home.mustache' , has:
<div class="main"> content </div> <div class="sidebar"> {{> component1 }} {{> component2 }} </div>
i guess in head this, compontent-container spits out opening , closing markup (then can remove container each component):
<div class="sidebar"> {{# component-container }} {{> component1 }} {{/ component-container }} {{# component-container }} {{> component2 }} {{/ component-container }} </div>
Comments
Post a Comment