Использование нескольких html-файлов в пользовательском интерфейсе onsen

Я только что открыл для себя 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(). Они успешно загрузились, но опять не отображаются до второго клика...

Было бы обидно, если бы такой отличный фреймворк не предлагал разбить проект на несколько файлов.


person HeikoS    schedule 16.01.2015    source источник
comment
Покажите нам содержимое обеих страниц   -  person Rahil Wazir    schedule 17.01.2015
comment
Я думаю, что основная проблема заключается в том, что эти внешние файлы не загружаются при запуске. А зачем им? Приложение еще не знает, что они существуют...   -  person HeikoS    schedule 17.01.2015
comment
Я не могу воспроизвести это. Не могли бы вы воспроизвести это в plnkr?   -  person Rahil Wazir    schedule 17.01.2015
comment
Спасибо за попытку! plnkr.co/edit/Uazcy5ainjji2ifibmxA   -  person HeikoS    schedule 17.01.2015
comment
Удалите тег <ons-template>. Это необходимо только в том случае, если вы определяете шаблоны в index.html.   -  person Andreas Argelius    schedule 17.01.2015
comment
ДА! Удаление тегов решает проблему. Опубликуйте это как ответ, чтобы я мог принять его!   -  person HeikoS    schedule 17.01.2015


Ответы (1)


Удалите тег <ons-template>. Это необходимо только в том случае, если вы определяете шаблоны в index.html.

person Andreas Argelius    schedule 18.01.2015