简介

Question

简介

我正在尝试模仿服务器端包含类似进程，而是在客户端。我有一个标题和面板导航，我将在我的Web应用程序的每个页面上重复使用，我想集中它以便更有效地进行维护。

我的问题是，页面加载事件过程中的最佳时间何时调用我的HTML“include”，以便它仍然可以得到增强，并且点击/点击事件可以绑定到将打开导航面板的图像？

代码

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-属性但
当我刷新“关于我们”页面包括获取一些增强功能时，页面似乎有点加载，但是我尝试点击主页上的链接没有任何增强功能。对于此页面，我也希望出于其他原因在主页上进行data-prefetch。
最后，如果我在内容被包含后离开页面，那么回到它，我得到双重插入“包含”内容。为此，我应该将AJAX请求包装在IF语句中以检查内容吗？还是比那更聪明的东西？

请帮忙，谢谢你抽出时间。

Answer 1

尝试一下（与上面的代码分开） -

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

要回答关于仅添加一次ajax响应的上一个问题，可以使用jQuery's 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"]')和$('[data-role="page"]')作为选择器时，您将附加到jQM索引页中每个内容，标题和页面的第一个实例。要解决此问题，您需要将选择器优化为$('#abousUs [data-role="content"]')，$('#aboutUs [data-role="header"]')和$('#aboutUs [data-role="page"]')

就个人而言，我会在单个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。

jQuery Mobile - 增强和增强绑定到加载AJAX的HTML

简介

代码

一些观察：

1 个答案: