How to define mustache partials in HTML?

Question

this is my html:

<script type="text/html" id="ul-template">
    <ul id="list">
        {{> li-templ}}
    </ul>
</script>  

<script type="text/html" id="ul-template2">
    <div id="list2">
        {{> li-templ}}
    </div>
</script>    

<script type="text/html" id="li-templ">
    <p>{{ name }}</p>
</script>

as you can see, I want to reuse the #li-templ part, but it seems that I have to write it into a file called li-templ.mustache then I can include it as partial?
can I just define them in the single html file?

score 29 · Accepted Answer · answered Jan 19 '12 at 01:03

29

I'm assuming you're using the JS flavor of Mustache.

In mustache.js an object of partials may be passed as the third argument to Mustache.render. The object should be keyed by the name of the partial, and its value should be the partial text.

You need to:

Define some dummy data for name
Get your partial template by getting the HTML of #li-templ
Create an object with the name of the partial (li-templ) as the key
Tell Mustache to render each template with the view data including your partial

Here's some jQuery to do just that:

var view = {"name" : "You"},
li = $('#li-templ').html(), 
partials = {"li-templ": li},
ul1 = Mustache.to_html($('#ul-template').html(), view, partials),
ul2 = Mustache.to_html($('#ul-template2').html(), view, partials);;

document.write(ul1, ul2);

Here's a jsFiddle of it all working- http://jsfiddle.net/maxbeatty/EYDfP/

answered Jan 19 '12 at 01:03

maxbeatty

9,050
3
33
36

5

Hello, it's worth noting that `Mustache.to_html` has now been replaced with `Mustache.render` (the function definition remains the same) – Matt Sep 20 '13 at 11:47
Is it just me, or is the google-bot following links within templates embedded this way? Could it be due to the type="text/html" entry? Would are the consequences of using something like: type="text/mustache-template"? – pointernil Feb 20 '14 at 23:12
Since Mustache is from github, no more execution since MIME type is text, [here](http://jsfiddle.net/anandchakru/19z7gf6n/) is a modified fiddle, in case someone wants to refer. – Anand Rockzz May 27 '17 at 17:36

score 5 · Answer 2 · answered Nov 16 '12 at 13:38

ICanHaz.js (ICH) can help you with this.

ICanHaz.js: A simple/powerful approach for doing client-side templating with Mustache.js.

I've found that mixing templates (in scripts tags) with the ordinary HTML in the page messes with my code editor (syntax highlighting, indenting etcetera). Loading them as a separate server keeps your HTML clean.

Check out this ICH pull request for automatic loading of <script type="text/html" src="my-templates.html"></script> from your server to one template per file.

You could also load more than one template per remote HTML file this using simple code like:

function getTemplates(url) {
    $.get(url, function (response) {
        $('template', response).each(function () {
           ich.addTemplate(this.id, $(this).text());
        });
    });
}

Or, if you'd like ICH to load them automatically from urls in your page:

<head>
    <link rel="templates" type="text/html" href="my-templates.html">
</head>

$("link[type=templates]").each(function (index, link) {
    getTemplates(link.attr("href"));
});

In your my-templates.html

<templates>
    <template id="ul-template">
        <ul id="list">
            {{> li-templ}}
        </ul>
    </template>  

    <template id="ul-template2">
        <div id="list2">
            {{> li-templ}}
        </div>
    </template>    

    <template id="li-templ">
        <p>{{ name }}</p>
    </template> 
</templates>

How to define mustache partials in HTML?

2 Answers2

Linked