CODEWITHSUNDEEP
mustacheractivejs
Exception
Exception

Reputation: 8379

reuse parts of template

I have a template like below 

<div>
    <a href="{{href}}" class="{{class}}">{{linkText}}</a>
    same duplicate link below 
    <a href="{{href}}" class="{{class}}">{{linkText}}</a>
</div>

As you can see above <a href="{{href}}" class="{{class}}">{{linkText}}</a> is being reused two times. Is there any possible solutions to define it once and use it as many times as I need.

Upvotes: 0

Views: 172

Answers (2)

Codler
Codler

Reputation: 11256

You could either use Partials or Components to achieve this. Here is an example using Partials

http://jsfiddle.net/GdVz8/

<script id='template' type='text/ractive'>
<div>
    {{>link}}
    same duplicate link below 
    {{>link}}
</div>

<!-- {{>link}} -->
    <a href="{{href}}" class="{{class}}">{{linkText}}</a>
<!-- {{/link}} -->
</script>

Upvotes: 3

Wio
Wio

Reputation: 1251

You could leverage mustache iteration.

<div>
    {{#links}}
    <a href="{{href}}" class="{{class}}">{{linkText}}</a>
    {{/links}}
</div>

But you need your data to repeat.

{
    "links" : [{
        "href" : 1,
        "class" : 1,
        "linkText" : 1,
    },{
        "href" : 1,
        "class" : 1,
        "linkText" : 1,
    }]
}

Upvotes: 1

Related Questions