1

現在取り組んでいるモバイル アプリケーションは、プラグインとして phonegap、jqm、handlebar、jquery.inherit で構成されています。アイデアは、必要に応じてテンプレートを動的に挿入/削除することにより、単一ページのアプリケーションを作成することです。

現在、アプリケーションにはすべてを開始する index.js があり、最初のアプリケーションの実行に必要ないくつかの .js ファイルを動的にロードします。この時点まで、すべてが完全に正常に動作します。ハンドルバー テンプレートを html ファイルに動的に挿入しようとすると、問題が発生します。単一ページのアプリケーションには、次のものがあります。

<body onload="Index.Initialize()">                          
    <script id="webApp1-template" type="text/x-handlebars-template">                    
    </script>                           
</body>

前述のように、Initialize はいくつかのファイルをロードしてから、Index のコンストラクターを呼び出して、次のように初期テンプレートのロードを開始します。

Index.objWebApplication1 = new WebApplication1();

コンストラクター自体がローカルの ajax 呼び出しを行い、インジェクションに必要な html を取得します。

var urlParam = Common.azConstants.WebRoot + "/Modules/WebApplication1/View/WebApplication1/WebApplication1.html";
    $.ajax({
        url : urlParam,
        datatype: 'text/javascript',
        success: function(response, status, jqXHR) {
            var template = $("#webApp1-template").html(response);               
            var webApp1Tpl = Handlebars.compile(template.html());               
            $('body').html(webApp1Tpl);             
        },
        error: function(err){
            alert(JSON.stringify(err));
        }
    });

ローカル ファイルへの呼び出しが成功し、「応答」が警告された場合、注入する必要がある情報が表示されます。基本的には、jqm data-role="page を含む div などです。id="webApp1-template" を含むスクリプト次に、html コンテンツが入力されます。アラートを出すことでこれを確認できます。

alert(template.html());

次に、テンプレートはハンドルバーによってコンパイルされ、本文の html として設定されます。アラートを出すことでこれを確認できます。

alert($('body').html());

data-role="page" の div が表示されますが、すべてが画面にレンダリングされません。画面は空白です。

私が削除した場合

<div data-role="page" class="pages app" id="home">

挿入されている私のhtmlから、htmlはロードされますが、正しくレンダリングされません。私の仮定は、 data-role="page" を「更新」する必要があるということですが、試してみると

$('body').trigger("create");

絶対に何も起こりません。その中に div data-role="page" を持つハンドルバー テンプレートを動的にロードする方法はありますか? アイデアは、再利用可能なテンプレートを複数のページに配置し、これらのページ間を動的に遷移させることです。

ありがとう

4

1 に答える 1

1

イベント$('#your-page-id').trigger('pagecreate')をトリガーするために使用できます。pagecreate

このイベントは、ページが (ajax またはその他を介して) DOM で作成されたときに、すべてのウィジェットが含まれているマークアップを拡張する機会を得る前にトリガーされます。jQuery Mobile ウィジェットのように、ユーザーが子マークアップの拡張用に独自のカスタム ウィジェットを作成したい場合に最も便利です。

于 2013-06-29T21:34:14.750 に答える