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-网站上的其他页面在我尚未实现此方法的地方获得的其他属性

  • 当我刷新“关于我们”页面（包括获得一些增强功能）时，该页面似乎有些加载，但随后我尝试单击主页上的链接，没有任何增强。data-prefetch对于这个页面，出于其他原因，我也想从主页做一个。

  • 最后，如果我在包含内容后离开页面然后返回到它，我会得到一个“包含”内容的双重插入。为此，我应该将 AJAX 请求包装在并IF检查内容的语句吗？或者更聪明的东西？

请帮助并感谢您抽出宝贵的时间。

4

1 回答 1

1

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

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

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

就个人而言，我会在一个单一的内部做你的ajax，pagebeforeshow因为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 回答