2017-05-16 4 views
0

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

,536,913,632 10
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의 하위 항목입니다.

따라서, 예를 들어, 내가 가진 하나의 문제는 내 Menu 내가 현재 자바 스크립트를 통해 active 클래스를 설정하여 방문하고있어 페이지를 추적하려는 경우 매번 내가 페이지를 방문하기 때문에, 내가 문제를 것입니다 js 파일 (및 기타 모든 파일)이 다시 다운로드되고 내가했던 모든 논리가 풀립니다.

난 그냥의 내용을 변경하려면 :

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

</div> 

페이지의 모든 나머지를 새로 고치지 않고.

위젯 접근 방식을 변경하여이를 수행 할 수 있습니까? 당신이 원하는 것은 기본적으로 단일 페이지 응용 프로그램입니다

감사

답변

2

. 이 경우 페이지 상속은 잘 작동하지 않습니다. 사용자가 메뉴 항목을 클릭 할 때 Page1, Page2 등을 패널로 변환하고 AJAX를 사용하여 페이지 내용으로 배치해야합니다 (코드 wicket : id = "template").

+0

이 흐름의 간단한 예를 들려 주시겠습니까? – Briston12

+0

솔직히 보여줄 코드 나 예제가 없지만 현재 컨텐츠 패널을 올바른 것으로 대체하는 AjaxLinks로 BookmarkablePageLinks를 교체하기 시작합니다. 이것은 많은 일을해야합니다. –

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>은 어린이 페이지/패널이 자신의 사용자 지정 마크 업이 상위 구성 요소로부터 상속 마크 업을 확장 "주입"할 수있는 정의하는 부모의 마크 업 내부에 사용됩니다. 이제 자식 태그 만 업데이트됩니다. 확실하지는 않지만 하위 요소 업데이트와 같이 보입니다.