Question

我正在使用Wicket，我已按照this指南（以及this一个）来构建网页模板。我的目标是在<div>内部有一个固定的页眉和页脚以及动态<body>，当我通过点击某些菜单链接更改页面时，它会更改其内容。

所以最后我做了类似的事情：

HomePage.html

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title wicket:id="title"> Title </title>
    <link rel="stylesheet" 
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head> 

  <body>
    <div wicket:id="menu"></div>

    <div wicket:id="homepageContent"></div>

    <div id="content" wicket:id="template" class="">
      <wicket:child/>
    </div>

    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/myjs.js"></script>
  </body>
</html>

HomePage.java

public class HomePage extends WebPage {
    // Title of the current page
    private String pageTitle;

    public HomePage() {
        // dynamic page title
        add(new Label("title", new PropertyModel<>(this, "pageTitle")));

    // ...
    }

    // ...

    public String getPageTitle() {
        return pageTitle;
    }

    public final void setPageTitle(String title) {
        pageTitle = title;
    }
}

Menu.java

public class Menu extends Panel {
    public Menu(String id) {
        super(id);

        add(new BookmarkablePageLink<>("homepageLink", HomePage.class));
        add(new BookmarkablePageLink<>("page1Link", Page1.class));
        add(new BookmarkablePageLink<>("page2Link", Page2.class));
    }
    public Menu(String id, IModel<?> model) {
        super(id, model);
    }
}

Page1.java

public class Page1 extends HomePage {
   public Page1() {
        setPageTitle("Page1");

        // ...
    }
}

Page2.java

public class Page2 extends HomePage {
   public Page2() {
        setPageTitle("Page2");

        // ...
    }
}

问题在于，每当我使用Menu打开页面（Page1或Page2）时，浏览器会重新加载所有资源，我认为这是由于{{{ 1}}和Page1是Page2的孩子。

所以，例如，我遇到的一个问题是，如果我希望我的HomePage通过javascript设置Menu课程来跟踪我当前正在访问的网页，我会有麻烦，因为每次我访问页面时，active文件（以及所有其他文件）都会再次下载，我放弃了我所做的所有逻辑。

我只想更改以下内容：

js

不刷新页面的其余部分。

是否可以通过更改Wicket方法来实现这一目标？

由于

Answer 1

您想要做的基本上是单页应用程序。在这种情况下，页面继承不能很好地工作。当用户点击菜单项时，您需要将Page1，Page2等转换为面板并使用AJAX将它们作为页面内容（在您的代码窗口中：id =“template”）放置。

Answer 2

您应该在父标记中使用<wicket:extend></wicket:extend>。类似的东西：

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title wicket:id="title"> Title </title>
    <link rel="stylesheet" 
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head> 

  <body>
  <wicket:extend>
    <div wicket:id="menu"></div>

    <div wicket:id="homepageContent"></div>

    <div id="content" wicket:id="template" class="">
      <wicket:child/>
    </div>

    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/myjs.js"></script>
  </wicket:extend>
  <section id="content">
      <wicket:child/>
  </section>
  </body>
</html>

在父标记内部使用

<wicket:child>来定义子页面/面板可以“注入”其自定义标记的位置，从而扩展从父组件继承的标记。现在只有子标记会更新，我不完全确定，但看起来只有子代码更新。

创建Wicket页眉/页脚/内容布局，其中只有内容动态更改

2 个答案: