javascript - Backbone.js templating requiring invalid html in Phonegap? -
tl;dr : in template file, if don't have invalid html, template won't display in phonegap.
the html index looks this:
<body onload="onbodyload()"> <div data-role="page"> <a href="#login" id="clickme">click go login</a> </div> </body>
my template file (currently) simple:
<div data-role='content' id='loginpage'> test </div>
the problem is, when try display template using 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 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; } });
it doesn't work.
the interesting part, if add single opening or closing tag no valid partner template file, displays perfectly. can closing div
, opening table
, opening label
, closing p
, etc. far tag have tried makes work long tag invalid.
soooo......wtf?
should point out works either way in chrome.
edit
this tpl
does, , appears error somehow happening here. if html valid, isn't loaded.
tpl = { // hash of preloaded templates app templates: {}, // recursively pre-load templates app. // implementation should changed in production environment. template files should // concatenated in single file. loadtemplates: function (names, callback) { var = 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); }, // template name hash of preloaded templates get:function (name) { console.log('getting ' + name); var temp = this.templates[name]; console.log('got it!'); return temp; } };
i had more of less similar issue backbone template when run in device, changed loadtemplate method following , resolved issue.
var loadtemplate = function (index) { var name = names[index]; console.log('loading template: ' + name); var data = $.ajax({type: 'get', url: 'tpl/' + name + '.html', async: false}).responsetext; that.templates[name] = data; index++; if (index < names.length) { loadtemplate(index); } else { callback(); } }
Comments
Post a Comment