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?

Answer 1

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:

1. Define some dummy data for name
2. Get your partial template by getting the HTML of #li-templ
3. Create an object with the name of the partial (li-templ) as the key
4. 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/