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

動作しません。

本当に興味深い部分は、有効なパートナーがない単一の開始タグまたは終了タグをテンプレートファイルに追加すると、完全に表示されることです。クロージングdiv、オープニングtable、オープニングlabel、クロージングpなどがあります。これまでに試したタグは、そのタグが無効である限り機能します。

soooo ...... 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

バックボーンテンプレートをデバイスで実行すると、あまり似ていない問題が発生しました。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();
            }
        }
于 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 に答える