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

Popular posts from this blog

django - How can I change user group without delete record -

java - Need to add SOAP security token -

java - EclipseLink JPA Object is not a known entity type -