방금 온천을 발견했으며 디자인과 느낌이 마음에 듭니다.온천 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에 페이지를로드하려고했습니다. 두 번째 클릭까지 성공적으로로드되었지만 다시 표시되지 않았습니다 ...
이렇게 큰 프레임 워크가 여러 파일로 프로젝트를 분할하지 않는다면 수치 스러울 것입니다.
두 페이지 모두의 내용보기 –
편집보기 : – HeikoS
핵심 문제는 이러한 외부 파일이 실행시로드되지 않는다는 것입니다. 왜 그랬을까요? 응용 프로그램은 그들이 존재한다는 것을 아직 모릅니다 ... – HeikoS