0

tl;dr ：在我的模板文件中，如果我没有无效的 html，则模板不会显示在 Phonegap 中。

我的索引的 HTML 如下所示： 

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

我的模板文件（目前）很简单： 

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

问题是，当我尝试使用此主干代码显示该模板时： 

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

它不起作用。

真正有趣的部分是，如果我在模板文件中添加一个没有有效伙伴的打开或关闭标签，它会完美显示。它可以是 close div、 opening table、 opening label、 closingp等。到目前为止，只要该标签无效，我尝试过的任何标签都可以使其工作。

太好了……wtf？
我应该指出它在 Chrome 中的任何一种方式都有效。

编辑

这就是这样tpl做的，并且似乎错误在这里发生了。如果 HTML 有效，则不会加载。 

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

};
4

2 回答 2

1

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();
            }
        }
于 2012-06-05T16:46:38.760 回答
0

詹姆士。

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

抱歉，它是您真正用于 LoginPage 视图的模板吗？但是您使用 a作为参数调用该template方法。model我很困惑。所以我认为这就是问题所在。尝试从 更改$(this.el).html(this.template(this.model));为$(this.el).html(this.template(this.model.toJSON()));

于 2012-06-05T22:50:23.080 回答