‹ons-navigator› на вкладке не загружается

Я пробовал кнопки и списки, но по какой-то причине я не могу поместить страницу в стек навигатора из вкладки. Сказав это, я новичок в Онсене и легко могу что-то напутать. Я следил за примерами, и они отлично работают, когда вы просто выполняете навигацию по вкладкам или просто делаете навигатор, но не оба. Этот вопрос был похож, но не решил мою проблему: Разбиение на страницы пользовательского интерфейса Onsen: навигатор и панель вкладок

Приведенный ниже код не работает. Любая помощь приветствуется! Страница login.html находится в корневой папке www, и я использую облачную среду разработки Monaca.

<body>
<ons-tabbar position="bottom">
  <ons-tab page="home.html" active="true">
    <ons-icon icon="fa-home"></ons-icon>
    <span style="font-size: 14px">Home</span>
  </ons-tab>
  <ons-tab page="gameon.html">
    <ons-icon icon="fa-bullseye"></ons-icon>
    <span style="font-size: 14px">Game On!</span>
  </ons-tab>
  <ons-tab page="progress.html">
    <ons-icon icon="fa-line-chart"></ons-icon>
    <span style="font-size: 14px">Progress</span>
  </ons-tab>
  <ons-tab page="settings.html">
    <ons-icon icon="fa-gear"></ons-icon>
    <span style="font-size: 14px">Settings</span>
  </ons-tab>
</ons-tabbar>

<ons-template id="home.html">
  ...
</ons-template>

<ons-template id="gameon.html">
...    
</ons-template>

<ons-template id="progress.html">
...    
</ons-template>

<ons-template id="settings.html">
    <ons-navigator var="navigator">
        <ons-page>            
            <ons-toolbar>
              <div class="center">Settings</div>
            </ons-toolbar>
            <ons-button modifier="large" onclick="navigator.pushPage("login.html", { animation: "slide" });">Login</ons-button>
            <ons-list>
              <ons-list-item onclick="navigator.pushPage('login.html');" modifier="chevron">Login</ons-list-item>
              <ons-list-item>
                    Another Option
                    <ons-switch modifier="list-item" checked></ons-switch>
              </ons-list-item>
            </ons-list>
        </ons-page>
    </ons-navigator>
</ons-template>

Update: So after reviewing the docs for Onsen 2.0, I discover that for ons-navigator, the var attribute is for angular which I am specifically trying to avoid using as I want to keep the overhead as minimal as possible and just stick with straight JS (no frameworks). So the docs here https://onsen.io/2/reference/ons-navigator.html leave me confused as there is no way to reference the object without var. Thus it would seem, that if you are going to use the navigator then you must be using AngularJS which contradicts the JS reference page of the same docs which indicates that it doesn't require Angular and just the Onsen loader.js. Is this correct or am I losing my marbles?

Обновление 2: Итак, после внесения изменения ниже, и оно все еще не работает, я запустил его на своем телефоне и, наконец, получил сообщение об ошибке. Я даже вернулся к исходному коду и получил ту же ошибку, а именно:

Uncaught (in promise) Error: "html" must be one wrapper element. www/lib/onsenui/js/onsenui.js: 4139

Я предполагаю, что это связано с использованием и вызовом внешней страницы. Я попробую вытащить все на отдельные html-страницы и просто вызвать сами шаблоны. Кто знает???


angularjs monaca onsen-ui
person Munsterlander    schedule 22.01.2016    source источник
comment
В Onsen UI 2 каждый компонент действует как HTML-элемент. Поэтому вы можете просто сделать это способом JavaScript: document.getElementById('myNavigator').pushPage(...). Конечно, в навигаторе нужно указать ID: <ons-navigator id="myNavigator"> (или искать по названию тега).   -  person Fran Dios    schedule 22.01.2016
comment
Итак, я установил <ons-navigator id="myNavigator"> и использовал этот код <ons-list-item onclick="document.getElementById('myNavigator').pushPage('login.html');" modifier="chevron">Login</ons-list-item>, но он все равно не работает. Любые мысли о том, почему такое поведение происходит?   -  person Munsterlander    schedule 22.01.2016

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел проблему. На странице login.html у меня был блок <style> вне тегов <ons-page>. Из JS, упомянутого в сообщении об ошибке, я смог определить, что было запущено несколько HTML-оболочек. К счастью, быстрое решение глупого вопроса с моей стороны!

person Munsterlander    schedule 22.01.2016