[SOLVED] Handlebars Doesn't Work on Phonegap Mobile

Handlebars Doesn't Work on Phonegap Mobile

I am building a PhoneGap app using version 0.4.2.

I use Handlebars templates in my code, which I compile using this line:

var template = Handlebars.compile($("#myTemplateName").html());

The app functions as expected on desktop and mobile browsers, but when I try to test the mobile version using the PhoneGap Developer App (version 1.7.6), that line doesn't work. The console doesn't show any error output, but I think the app must be crashing because the app becomes non-responsive and any alerts after that line of code don't show up.

I also tried precompiling the handlebars templates and getting them using this line:

var template = Handlebars.templates["myTemplateName"];

I get the same response: the app works perfectly fine in browsers, but mysteriously stops working on mobile.

Why is this happening?

Other potentially useful information:

Along with PhoneGap, I'm also using jQuery Mobile
I'm using Handlebars version 4.0.5
jQuery Mobile, Handlebars, and the Handlebars templates are included in my index.html file in script tags (in that order).

Edit: As requested, here is an example:

<!DOCTYPE html>
<html>
<body id="body">

    <!-- Visible Page -->
    <div data-role="page" id="home">If this is visible it's not working.</div>

    <!-- Handlebars Library -->
    <script type="text/javascript" src="/js/handlebars-v4.0.5.js"></script>

    <!-- Handlebars Template -->
    <script id="template-content" type="text/x-handlebars-template">{{data}}</script>

    <!-- jQuery Mobile -->
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

    <!-- PhoneGap -->
    <script type="text/javascript" src="cordova.js"></script>

    <script>
        $( document ).ready(function() {
            var myTemplate = Handlebars.compile($("#template-content").html());
            $("#home").html(myTemplate({data:"It's working!"}));
        });
    </script>

</body>

On browsers I see "It's working" but using the PhoneGap Developer mobile app I see "If this is visible it's not working."

Solution

Phonegap is probably changing <script type="text/javascript" src="/js/handlebars-v4.0.5.js"></script> to <script type="text/javascript" src="file://js/handlebars-v4.0.5.js"></script>

Change it to <script type="text/javascript" src="js/handlebars-v4.0.5.js"></script>

Also make sure that jQuery is working, as you are using a CDN it's possible that Phonegap is not downloading it