Home/ Questions/Q 8030343
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T00:44:10+00:00

tl;dr : In my template file, if I don’t have invalid html, the template

  • 0

tl;dr : In my template file, if I don’t have invalid html, the template won’t display in Phonegap.

The HTML for my index looks like this: 

<body onload="onBodyLoad()">
    <div data-role="page">
      <a href="#login" id="clickme">Click to go to Login</a>
    </div>
  </body>

My template file is (currently) this simple: 

<div data-role='content' id='loginpage'>
this is a test
</div>

The problem is, when I try to display that template using this 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;
    }
});

It doesn’t work.

The REALLY interesting part, is if I add a single opening or closing tag with no valid partner to my template file, it displays perfectly. It can be a closing div, an opening table, an opening label, a closing p, etc. So far any tag I have tried makes it work as long as that tag is invalid.

soooo……wtf?
I should point out that it works either way in Chrome.

EDIT

This is what tpl does, and it appears that the error is somehow happening here. If the HTML is valid, it isn’t loaded. 

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;
    }

};
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I had the more of less similar issue with backbone template when I run it in device, I changed the loadTemplate method to following and it resolved the 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();
            }
        }
    • 0