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