2015-01-16 3 views
13

방금 ​​온천을 발견했으며 디자인과 느낌이 마음에 듭니다.온천 UI에서 복수 HTML 파일 사용

은 그래도 문제가 :

http://onsen.io/guide/overview.html#DefiningMultiplePagesinSingleHTML

다음

는 말한다 : "대신 별도의 파일에서 menu.html 및 content.html을 만드는, 당신은 또한 같은 페이지에서 페이지의 내용을 정의 할 수 있습니다 . "

각 응용 프로그램을 하나의 html 파일로 갖고 싶지 않으므로 각 템플릿을 별도의 파일에 저장하려고했습니다. 이것은 내 TabBar의입니다

www 
- index.html 
- products.html 
- services.html 

:이 내 파일 구조입니다

<ons-tabbar> 
    <ons-tabbar-item active="true" page="products.html"> 
    <div class="tab"> 
     <ons-icon icon="ion-home" class="tab-icon"></ons-icon> 
     <div class="tab-label">Products</div> 
    </div> 
    </ons-tabbar-item> 

    <ons-tabbar-item page="services.html"> 
    <div class="tab"> 
     <ons-icon icon="ion-gear-a" class="tab-icon"></ons-icon> 
     <div class="tab-label">Services</div> 
    </div> 
    </ons-tabbar-item> 
</ons-tabbar> 

편집 services.html의 내용 (products.html 비슷) :

<ons-template id="services.html"> 
    <ons-page> 
    <ons-toolbar> 
     <div class="center">Services</div> 
    </ons-toolbar> 

    <ons-list> 
     <ons-list-item>Item1</ons-list-item> 
     <ons-list-item>Item2</ons-list-item> 
     <ons-list-item>Item3</ons-list-item> 
    </ons-list> 
    </ons-page> 
</ons-template> 

END EDIT

이제 앱이로드되면 (Firefox, Chrome, iOS 에뮬레이터) 탭바와 빈 콘텐츠가 표시됩니다. 콘솔에서 외부 html 파일이 아직로드되지 않았 음을 알 수 있습니다. 서비스를 클릭하면 브라우저 services.html 파일을 가져 오지만 표시되지 않습니다. 제품을 클릭하면 products.html 파일이로드되지만 표시되지 않습니다.

마지막으로 두 번째로 서비스를 클릭하면 외부 HTML 파일의 내용이 올바르게 표시됩니다.

이것은 버그입니까? 해결 방법이 있습니까? ons.ready() 이벤트에서 $ templateCache에 페이지를로드하려고했습니다. 두 번째 클릭까지 성공적으로로드되었지만 다시 표시되지 않았습니다 ...

이렇게 큰 프레임 워크가 여러 파일로 프로젝트를 분할하지 않는다면 수치 스러울 것입니다.

+0

두 페이지 모두의 내용보기 –

+0

편집보기 : – HeikoS

+0

핵심 문제는 이러한 외부 파일이 실행시로드되지 않는다는 것입니다. 왜 그랬을까요? 응용 프로그램은 그들이 존재한다는 것을 아직 모릅니다 ... – HeikoS

답변

19

<ons-template> 태그를 제거하십시오. index.html에 템플릿을 정의하는 경우에만 필요합니다.