javascript - PJAX 多容器

Question

如何创建可以包含多个容器的 Pjax？我在这个链接上试过这个 Pjax:

https://github.com/defunkt/jquery-pjax/blob/master/README.md

这是我的代码:

$(document).pjax('a', '#pjax-container, #pjax-navbar');

但它不起作用。

然后我尝试了这段代码:

$(document).pjax('a', '#pjax-container');
$(document).pjax('a', '#pjax-navbar');

它也不起作用。它只加载最后一个。

如何让它发挥作用？

这是我的HTML

<div class="wrap">
    <nav id="w0" class="navbar-inverse navbar-fixed-top navbar" role="navigation" id="pjax-navbar">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w0-collapse"><span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span></button><a class="navbar-brand" href="/josh/cms_template/backend/web/">My Company</a></div>
            <div id="w0-collapse" class="collapse navbar-collapse">
                <ul id="w1" class="navbar-nav navbar-right nav">
                    <li class="active"><a href="/josh/cms_template/backend/web/site/index">Home</a></li>
                    <li><a href="/josh/cms_template/backend/web/site/logout" data-method="post">Logout</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container" id="pjax-container">
        <div class="site-index">
            this is my content
        </div>
    </div>
</div>

我想要的只是当我转到另一个页面时，只有 pjax-container 会改变。

我已经做到了。但导航栏没有变化。

Answer 1

Pjax 没有多个容器。

要将相同的响应复制到其他 pjax 容器，您可以像这样使用 pjax 完整事件处理程序。

从您的页面中删除/禁用现有的 pjax 代码:

//Remove Code

//$(document).pjax('a', '#pjax-container');
//$(document).pjax('a', '#pjax-navbar')
//$(document).pjax('a', '#pjax-container, #pjax-navbar');


// Add this Code

$(document).on('pjax:complete', function(event) {
   //This code will copy #pjax-container container's response 
   // to #pjax-navbar when event is completed.

   $('#pjax-navbar').html(  $('#pjax-container').html() );

});