Question

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>

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

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

它不起作用。

真正有趣的部分是，如果我在模板文件中添加一个没有有效合作伙伴的开始或结束标记，它就会完美显示。它可以是结束div，开场table，开场label，结束p等。到目前为止，我尝试的任何标签都可以使其工作该标签无效。

SOOOO ......跆拳道？
我应该指出它可以在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;
    }

};

Answer 1

当我在设备中运行骨干模板时，我遇到了更少的类似问题，我将loadTemplate方法更改为跟随并解决了问题。

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

Answer 2

詹姆斯。

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

抱歉，这是一个模板，你真的用于LoginPage视图吗？但是，您使用template作为参数调用model方法。我糊涂了。所以我认为这是问题所在。尝试从$(this.el).html(this.template(this.model));更改为$(this.el).html(this.template(this.model.toJSON()));

Backbone.js模板在Phonegap中需要无效的html？

2 个答案: