0

序章

サーバー側のインクルードのようなプロセスを模倣しようとしていますが、代わりにクライアント側にあります。Web アプリのすべてのページで再利用するヘッダーとパネル ナビゲーションがあり、それを一元化して、より簡単で効率的なメンテナンスを行いたいと考えています。

私の質問は、ページ ロード イベント プロセスで HTML の「インクルード」を呼び出すのに最適な時期はいつですか?

コード

HTML - 会社概要ページ(注: 単一ページのテンプレートを使用。<head>簡潔にするためにコードを省略)

    <div data-role="page" id="aboutUs" title="About Us">

        <div data-role="content"> 

            <p>My unique to the page content here</p>

        </div><!-- /content -->

    </div>
    <!-- /page About Us -->

HTML - コンテンツを含める 

        <div id="headerContainer" data-role="header">
            <div class="companyLogoHeader"><img class="imgCompanyLogo" src="imgHeaderLogo.jpg" width="847" height="27" /></div>             
            <img id="imgPanelNavButton" src="icon-panel-bars.png" />
            <h2></h2>
        </div><!-- /header -->


        <div data-role="panel" data-position="left" data-display="reveal" id="nav-panel" data-theme="a">

                <ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search">
                    <li data-icon="false" data-theme="g">
                        <a href="#" data-rel="back" data-direction="reverse"><img src="icon-panel-arrow-left.png" class="ui-li-icon ui-corner-none" /> Back</a>
                        <a href="#" data-rel="close" data-icon="delete" data-iconpos="notext" data-theme="h" style="margin-top:-1px;">Close Menu</a>
                    </li>
                    <li><a href="index.html"><img src="icon-panel-home.png" class="ui-li-icon ui-corner-none" /> Home</a></li>
                    <li><a href="scheduling.html"><img src="icon-panel-calendar.png" class="ui-li-icon ui-corner-none" /> Schedule</a></li>
                    <li><a href="services/services.html"><img src="icon-panel-list-bullets.png" class="ui-li-icon ui-corner-none" /> Services</a></li>
                    <li><a href="contact.html"><img src="icon-panel-phone.png" class="ui-li-icon ui-corner-none" /> Contact Us</a></li>
                </ul>

        </div>

JavaScript:pagecreate (私の理解では、拡張プロセスはイベントの直後に行われます

$(document).on('pagebeforecreate', '#aboutUs', function()
{

$.ajax({
    url: 'assets/includes/SSI-Header-NavPanel.html',
    success: function(html) {
        $('[data-role="content"]').before(html); //Put the "include" code before the content container
        $('[data-role="header"]').find('h2').text($('[data-role="page"]').attr('title')).trigger('create'); // Once the "include" code is in the DOM, get the page title and insert it in the 'H2' tag for a page heading, then trigger a create for enhancement
        $('[data-role="page"]').trigger('create'); // adding this seem to help with the enhancements but didn't do the full job.  Don't even know if this is right?
        $('#imgPanelNavButton').on('click', function() { // now that the icon-panel-bars.png image is loaded into the DOM, bind a click event to it so it can open the panel on tap.
            $('#nav-panel').panel('open');
        });

    }
});


});

いくつかの観察:

  • data-role="header"拡張クラスを取得していないようで、このアプローチをまだ実装していないサイトの他のページが取得している追加のdata-属性

  • いくつかの拡張機能を取得するなど、About Us ページを更新すると、ページが多少読み込まれるように見えますが、ホームページからリンクをクリックしようとすると、何も拡張されません。このページについてはdata-prefetch、他の理由でもホームページからやりたいと思っています。

  • 最後に、コンテンツがインクルードされた後にページから移動して戻ってくると、「インクルード」コンテンツが二重に挿入されます。このために、AJAX リクエストをラップしIFて、コンテンツのステートメント チェックを行う必要がありますか? それともそれよりも賢い何か？

お時間を割いていただきありがとうございます。

4

1 に答える 1

1

これを試してみてください（上記のコードとは別に）-

$('#aboutUs').one('pagebeforeshow', function(){
    $(this).trigger('pagecreate');
});

ajax 応答を 1 回だけ追加するという最後の質問に答えるには、jQuery のoneメソッドを使用できます。以下のように -

$('#aboutUs').one('pagebeforecreate', function() {
    $.ajax({
        url: 'assets/includes/SSI-Header-NavPanel.html',
        success: function(html) {
            $('#aboutUs [data-role="content"]').before(html); //Put the "include" code before the content container
            $('#aboutUs [data-role="header"] h2').text($('#aboutUs [data-role="page"]').attr('title'));
            $('#aboutUs #imgPanelNavButton').on('click', function() { // now that the icon-panel-bars.png image is loaded into the DOM, bind a click event to it so it can open the panel on tap.
                $('#aboutUs #nav-panel').panel('open');
            });

        }
    });
});

また、代わりに$(document).on('pagebeforecreate', '#aboutUs', function()単純に行うことができます$('#aboutUs').on('pagebeforecreate', function()

Here is a jsFiddle Demo that appends dynamic content to a page once and then triggers the pagecreate in the pagebeforeshow event

/アップデート

コンテンツを追加するときにセレクターとして$('[data-role="content"]')、$('[data-role="header"]')、およびを使用すると、jQM インデックス ページ内のすべてのコンテンツ、ヘッダー、およびページの最初のインスタンスに追加されます。これを解決するには、セレクターを、、および$('[data-role="page"]')に絞り込む必要があります。$('#abousUs [data-role="content"]')$('#aboutUs [data-role="header"]')$('#aboutUs [data-role="page"]')

個人的には、トランジションごとに 2 回トリガーされるpagebeforeshowため、シングル内で ajax を実行します。pagebeforechangeこれが私がこれを行う方法です-

$('#aboutUs').one('pagebeforeshow', function() {
    $.ajax({
        url: 'assets/includes/SSI-Header-NavPanel.html',
        success: function(html) {
            $('#aboutUs [data-role="content"]').before(html); //Put the "include" code before the content container
            $('#aboutUs [data-role="header"] h2').text($('#aboutUs [data-role="page"]').attr('title'));
            $('#aboutUs #imgPanelNavButton').on('click', function() { // now that the icon-panel-bars.png image is loaded into the DOM, bind a click event to it so it can open the panel on tap.
                $('#aboutUs #nav-panel').panel('open');
            });
            $('#aboutUs').trigger('pagecreate');
        }
    });
});

jQuery oneこれに使用していることに注意してくださいpagebeforeshow。ページに追加することpagebeforeshowもaboutUsできます。

于 2013-08-05T20:06:03.120 に答える