Summary: When my template file contains valid HTML code, it does not display in Phonegap.
The structure of my index.html file is as follows:
<body onload="onBodyLoad()">
<div data-role="page">
<a href="#login" id="clickme">Click to go to Login</a>
</div>
</body>
As for my template file, it is currently quite simple:
<div data-role='content' id='loginpage'>
this is a test
</div>
The issue arises when I attempt to display the template using the following Backbone code:
var LoginPage = Backbone.View.extend({
initialize: function(){
this.template = _.template(tpl.get("login"));
console.log("Got Login Template");
console.log(this.template);
},
render: function(e){
console.log("rendering login page with the following user");
console.log(this.model);
$(this.el).html(this.template(this.model));
this.mainView = new LoginView({ el: $("#loginpage", this.el), model: this.model });
this.mainView.render();
return this;
}
});
var LoginView = Backbone.View.extend({
initialize: function(){
},
render: function(e){
console.log("rendering login view");
return this;
}
});
Unfortunately, it doesn't work as expected.
An interesting observation is that adding an invalid tag (such as a lone opening or closing tag) to the template file allows it to display perfectly. It could be a closing div, an opening table, an opening label, a closing p, etc. Any invalid tag seems to make it work.
So, what's going on?
It should be noted that both scenarios work fine in Chrome.
EDIT
The problem seems to be related to the functionality of tpl. The error appears to occur within this section of the code. If the HTML is valid, it fails to load.
tpl = {
// Hash of preloaded templates for the app
templates: {},
// Recursively pre-load all the templates for the app.
// This implementation should be changed in a production environment. All the template files should be
// concatenated in a single file.
loadTemplates: function (names, callback) {
var that = this;
var loadTemplate = function (index) {
var name = names[index];
console.log("Loading " + name);
$.ajax({
url: 'templates/' + name + '.html',
data: {},
success: function (data){
that.templates[name] = data;
index++;
if (index < names.length) {
loadTemplate(index);
} else {
callback();
}
},
error: function (msg) {
console.log(msg);
},
async: false
});
};
loadTemplate(0);
},
// Get template by name from hash of preloaded templates
get:function (name) {
console.log('getting ' + name);
var temp = this.templates[name];
console.log('got it!');
return temp;
}
};