2017-05-16 3 views
0

私はWicketを使用していて、thisガイド(さらにthis)をフォローしてWebページテンプレートを作成しました。 私はいくつかのメニューリンクをクリックしてページを変更すると、<body>内に固定ヘッダーとフッターと動的<div>が内容を変更することを目標しています。このようなコンテンツのみが動的に変更されるWicketヘッダー/フッター/コンテンツレイアウトを作成する

だから、最後に私が行っている何か:

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)ブラウザを使用している毎回ですすべてのリソースをリロードすると、Page1とが原因であると思います3239で、子はHomePageです。

ので、例えば、私が持っている1つの問題は、私は私のMenuは、私は現在、javascriptを経由activeクラスを設定することで、訪問していますページを追跡したい場合は毎回、私はページをご覧ので、私は悩みを持っているということですjsファイル(と他のすべて)が再びダウンロードされ、私はすべてのロジックを失う。

私だけの内容を変更したいと思います:

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

</div> 

ページのすべての残りの部分を更新せず。

Wicketアプローチを変更するだけで可能ですか?

ありがとうございます。

答えて

2

基本的にはシングルページアプリケーションです。この場合、ページの継承はうまく機能しません。ユーザーがメニュー項目をクリックすると、Page1、Page2などをパネルに変換し、AJAXを使用してページコンテンツとして配置する必要があります(コードwicket:id = "template")。

+0

このフローの簡単な例を教えてください。 – Briston12

+0

正直言って私は表示するコードや例はありませんが、BookmarkablePageLinksを現在のコンテンツパネルを正しいものに置き換えるAjaxLinksに置き換えることになります。これは仕事の多くを行うはずです。 –

0

親マークアップで<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>は、子どものページ/パネルは、カスタムマークアップは、親コンポーネントから継承されたマークアップを拡張する「注入」することができます場所を定義するために、親のマークアップ内で使用されています。 子マークアップのみが更新されますが、完全にはわかりませんが、子パーツ更新のように見えます。

関連する問題