Я только что открыл 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>
END EDIT
Теперь, когда приложение загружается (Firefox, Chrome, эмулятор iOS), он отобразит панель и пустой контент. В консоли вы можете видеть, что внешние html файлы еще не загружены. Если я нажимаю "Службы", браузер получает файл services.html, но он не отображается. Я нажимаю "Продукты", файл products.html загружается, но не отображается.
Наконец: если я нажму на "Службы" во второй раз, содержимое внешнего html файла будет отображаться правильно.
Это ошибка? Есть ли обходной путь? Я попытался загрузить страницы в $templateCache в событие ons.ready(). Они были успешно загружены, но снова не отображаются до второго щелчка...
Было бы позором, если бы отличная инфраструктура вроде этого не предлагала бы разбиение проекта на несколько файлов.