Я только что открыл для себя onsen ui, и мне очень нравится дизайн и ощущения от него.
У меня есть проблема, однако:
http://onsen.io/guide/overview.html#DefiningMultiplePagesinSingleHTML
Здесь говорится: «Вместо того, чтобы создавать menu.html и content.html в отдельных файлах, вы также можете определить содержимое страницы на той же странице».
Мне не нравится, когда все мое приложение находится в одном html-файле, поэтому я попытался поместить каждый шаблон в отдельный файл. Это моя файловая структура:
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>
ЗАВЕРШИТЬ РЕДАКТИРОВАНИЕ
Теперь, когда приложение загружается (Firefox, Chrome, эмулятор iOS), оно будет отображать панель вкладок и пустой контент. В консоли видно, что внешние html файлы еще не загружены. Если я нажму на Службы, браузер получит файл services.html, но не отобразит его. Я нажимаю «Продукты», файл products.html загружается, но не отображается.
Наконец: если я нажму «Службы» во второй раз, содержимое внешнего html-файла будет отображаться правильно.
Это ошибка? Есть ли обходной путь? Я попытался загрузить страницы в $templateCache в событии ons.ready(). Они успешно загрузились, но опять не отображаются до второго клика...
Было бы обидно, если бы такой отличный фреймворк не предлагал разбить проект на несколько файлов.
<ons-template>
. Это необходимо только в том случае, если вы определяете шаблоны вindex.html
. - person Andreas Argelius   schedule 17.01.2015