Handlebars Templates Don't Compile in PhoneGap Mobile App

19 views

Skip to first unread message

Olivia Watkins

unread,

Jan 20, 2017, 4:25:17 PM1/20/17

to phonegap

I created a post about my issue on Stack Overflow but haven't gotten a response yet, so I'll ask here:

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).

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."

Steve Husting

unread,

Jan 23, 2017, 11:38:55 AM1/23/17

to phonegap

You might want to go back to this group's welcome screen. This is a forum for Apache Cordova (despite the "phonegap" in the title). The welcome screen will give you the URL for the PhoneGap forum.

Reply all

Reply to author

Forward

0 new messages