Edit in JSFiddle

<div id="test"></div>

<script id="template-main" type="text/template">
    <h1>{{title}}</h1>
    <ul>
        {{#names}}
        <li>
            {{> user}}
        </li>
        {{/names}}
    </ul>
    {{> footer}}
</script>

<script id="template-user" type="text/template">
    {{last}}, {{first}}
</script>

<script id="template-footer" type="text/template">
    <p>&copy; {{date}}</p>
</script>

// Ajax template loader
function templateLoader(name) {
    // Uses the jsFiddle API to bounce back the HTML content as a sync Ajax call
    var result = '',
        getTemplate = $.ajax('/echo/html/', {
        data: {
            html: $('#template-'+name).html(),
            delay: 1
        },
        method: 'post',
        async: false,
        success: function (data) {
             result = data;
        }
    });
    return result;
}

var data = {
    title: 'Some People',
    names: [
        { first: 'Patrick', last: 'Stuart'},        
        { first: 'LeVar', last: 'Burton'},        
        { first: 'Brent', last: 'Spiner'}
    ],
    date: '1/1/2011'
};

var mainTemplate = templateLoader('main');

var html = Mustache.render(mainTemplate, data, templateLoader);

$(html).appendTo('#test')