Search code examples
javascriptjqueryhtmlmustache

Mustache using Partial Command in HTML & jQuery


I defined a Mustache partial in my HTML page. (not a script or whatever block) My variables get replaced but the parcial doesnt. If I log the loaded template the ">" is converted to "&gt ;" - which is understandable. But how can I specify partial includes in my HTML instead or is my approach wrong?

$(function($) {
    var template = $('#main').html();
    
    // > is converted to entity >
    // var: {{ name }}<br>partial: {{&gt; partial }}
    console.log(template);
    
    var view = {name: 'Paul'};
    var partials = {partial: '<h1>!</h1>'};
    var html = Mustache.render(template, view, partials);
    $('#main').html(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.0/mustache.js"></script>
<div id="main">
    var: {{ name }}
    <br>
    partial: {{> partial }}
</div>

Here's a fiddle: http://jsfiddle.net/f9df3txv/2/

Thanks guys!


Solution

  • I did a workaround, to get the ">" char back to the template by using a simple string replacement.

    $(function($) {
        var template = $('#main').html().replace(/{{&gt;/g, "{{>");
        var view = {name: 'Paul'};
        var partials = {partial: '<h1>!</h1>'};
        var html = Mustache.render(template, view, partials);
        $('#main').html(html);
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.0/mustache.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="main">
        var: {{ name }}
        <br>
        partial: {{> partial }}
    </div>