ajax - 带有浏览器历史记录/标签的 PrimeFaces Ajax 导航

Question

我实现了一个单页设计的 Web 应用程序。它基本上加载单个页面，然后使用 AJAX 更新中心内容。代码如下:

    <h:body>

        <pe:layout id="page" fullPage="true">


            <!-- West -->
            <pe:layoutPane id="west" position="west" >
                <f:facet name="header">Main Menu</f:facet>

                <h:form id="form1">

                    <p:panelMenu id="panelMenu">


                        <p:submenu label="Persons">

                            <p:menuitem value="Person List" update=":centerpanel"
                                actionListener="#{layout.setAll('formPersonList.xhtml', 'Person List')}">                           
                            </p:menuitem>

                        </p:submenu>



                    </p:panelMenu>
                </h:form>
            </pe:layoutPane>

            <!-- Center -->
            <pe:layoutPane id="content" position="center">

                <h:panelGroup id="centerpanel" layout="block">
                    <ui:include id="include" src="#{layout.navigation}" />

                </h:panelGroup>

            </pe:layoutPane>
        </pe:layout>
</h:body>

这基本上可以工作，但我也想启用浏览器导航。例如:http://ticketmonster-jdf.rhcloud.com/与网址上的主题标签。所以使用后退/前进按钮我可以转到等效选项。知道如何做到这一点吗？

Answer 1

我已经根据您的问题创建了一篇博文，解释了如何使用 jQuery BBQ 使其工作。

使用 jQuery BBQ，您可以跟踪状态、历史记录并允许添加书签，同时通过 AJAX 和/或 DHTML 动态修改页面。只需单击链接，使用浏览器的后退和下一步按钮，重新加载页面。

首先我们应该包括jQuery BBQ .

<h:outputScript library="js" name="jquery.ba-bbq.min.js" /> 

现在考虑我们有菜单(带有我们所有的导航规则)

  <p:submenu label="Meat">
     <p:menuitem outcome="/meat/steak.xhtml" value="Steak" />
     <p:menuitem outcome="/meat/burger.xhtml" value="Burger" />
     <p:menuitem outcome="/meat/chicken.xhtml" value="Chicken" /> 
     <p:menuitem outcome="/meat/kebab.xhtml" value="Kebab" /> 
  </p:submenu>

然后是居中的内容

 <pe:layoutPane id="content" position="center">

     <h:panelGroup id="centerpanel" layout="block">
        <ui:include id="include" src="#{mainBean.currentNav}" />
     </h:panelGroup>

  </pe:layoutPane>

include 反射(reflect)了当前点击的导航。

现在在表单中定义一个remoteCommand

<p:remoteCommand name="updateNav" 
                 actionListener="#{mainBean.updateNav()}"  
                 update=":centerpanel"/>

此 remoteCommand 将根据主题标签更新我们的 currentNav。

创建您的 JS 文件或将以下代码包含到准备好的文档中

$(document).ready(function() {

   $('.ui-menuitem-link').click(function(event) {
       event.preventDefault();
       var currentNav = $(this).attr('href').
                        substr($(this).attr('href').indexOf("/faces") + 6)
       window.location.hash = '#' + currentNav;

   })

   $(window).bind('hashchange', function(e) {

    var url = $.param.fragment();
    updateNav([{name: 'currentNav', value: url}]); //remoteCommand Call

   })

   $(window).trigger('hashchange');

 });

基本上我们首先处理我们对菜单项的点击，设置窗口的散列。

然后我们使用 jQuery BBQ 的帮助定义一个窗口的 hashchange 事件。

ManagedBean

public void updateNav() {
    FacesContext context = FacesContext.getCurrentInstance();
    Map map = context.getExternalContext().getRequestParameterMap();
    currentNav = (String) map.get("currentNav");
}

有关完整代码，请参阅我为该问题创建的新帖子。

Primefaces Hash Navigation Using jQuery BBQ

而且这个例子也可以在 github 上找到。 .

希望对您有所帮助。