Подтвердить что ты не робот

Использование нескольких 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>

END EDIT

Теперь, когда приложение загружается (Firefox, Chrome, эмулятор iOS), он отобразит панель и пустой контент. В консоли вы можете видеть, что внешние html файлы еще не загружены. Если я нажимаю "Службы", браузер получает файл services.html, но он не отображается. Я нажимаю "Продукты", файл products.html загружается, но не отображается.

Наконец: если я нажму на "Службы" во второй раз, содержимое внешнего html файла будет отображаться правильно.

Это ошибка? Есть ли обходной путь? Я попытался загрузить страницы в $templateCache в событие ons.ready(). Они были успешно загружены, но снова не отображаются до второго щелчка...

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

4b9b3361

Ответ 1

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