jQuery mobile & mustache

Example of jQuery mobile using mustache templates

by mwfire

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.js"></script>

JavaScript

/**
 * 
 *
 */

window.pageNavigator = {
    lastPageId: null,
    loadPage: function(tmplPath, params, pageId, pageData) {
        if(!tmplPath || !pageId) return alert('Please provide templatePath and pageId!');
        var self = this;
        pageData = pageData || {};
        params = params || {};
        
        // This would be a $.get outside jsfiddle
        $.post(
            '/echo/html/', // This would be tmplPath outside jsfiddle
            params,
            // success
            function(response) {
            },
            //error
            function(response) {
                alert('Could not load page!);
            }
        );
    },
    
    attachPage: function() {
    }
    

}

var lastPageId = null;

function loadNextPage(tmplPath, pageId, pageData) {
    $.post(
        '/echo/html/', // This would be tmplPath
        {
            html: '<div data-role="page" id="page-' + pageId + '"><div data-role="header"><h1>{{pageTitle}}</h1></div><div data-role="content"><a href="javascript:newPage()" data-role="button">Test</a></div></div>',
            delay: 2
        },
        function(template) {
            var html = Mustache.to_html(template, pageData);
            $(html).appendTo($.mobile.pageContainer);
            $.mobile.changePage( "#page-" + pageId, {
              changeHash: false
            });
            if(lastPageId) $('#page-' + lastPage).remove();
            lastPageId = pageId;
        }
    );
}

loadNextPage('/templates/test.html', 'test1', { pageTitle:'Title 1' });

function newPage() {
    loadNextPage('/templates/test.html', 'test2', { pageTitle:'Title 2' });
}