Открытие новой страницы Monaca с пользовательским интерфейсом Onsen

Question

У меня следующий код сделан. У меня <ons-splitter> в index.html.

Я хочу создать новую страницу с помощью кнопки NEW. Я пробовал, но никаких действий не отображается в предварительном просмотре.

Мой код ниже, Пожалуйста, помогите,

<ons-splitter> 
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable> 
    <ons-page> 
    <ons-list> 
     <ons-list-item onclick="fn.load('home.html')" tappable> 
     Home 
     </ons-list-item> 
     <ons-list-item onclick="fn.load('settings.html')" tappable> 
     Settings 
     </ons-list-item> 
     <ons-list-item onclick="fn.load('about.html')" tappable> 
     About 
     </ons-list-item> 
    </ons-list> 
    </ons-page> 
</ons-splitter-side> 
<ons-splitter-content id="content" page="home.html"></ons-splitter-content> 

---

<ons-template id="home.html"> 
    <ons-navigator var="myNavigator"> 
    <ons-page> 
     <ons-toolbar> 
     <div class="left"> 
      <ons-toolbar-button onclick="fn.open()"> 
      <ons-icon icon="ion-navicon, material:md-menu"></ons-icon> 
      </ons-toolbar-button> 
     </div> 
     <div class="center"> 
      Main 
     </div> 
     </ons-toolbar> 
     <p style="text-align: left; opacity: 0.6; padding-top: 20px; margin-left: 15px"> 
     Category 
     </p> 
     <ons-list> 
     <ons-list-item tappable>a</ons-list-item> 
     <ons-list-item tappable>b</ons-list-item> 
     <ons-list-item tappable>c</ons-list-item> 
     </ons-list> 
      <ons-button modifier="quiet" onclick="myNavigator.pushPage('page2.html')"> 
       New 
      </ons-button> 
    </ons-page> 
    </ons-navigator> 
    </ons-template> 

Answer 1

Вы используете угловой? Поскольку вы используете onclick и не отметили это, я предполагаю, что ответ отрицательный.

В этом случае проблема, с которой вы столкнулись, вероятно, Uncaught ReferenceError: myNavigator is not defined. Чтобы увидеть такие проблемы, вы можете открыть консоль браузера (ctrl + shift + L или F12 -> Console). Как только вы увидите решение проблемы, вам станет легче.

Сама проблема означает, что у вас нет переменной myNavigator. Это потому, что атрибут var предназначен только для угловых.

Чтобы устранить эту проблему вам нужен этот 2 шаг:

1. изменения var в id
2. добавить var myNavigator = document.getElementById('myNavigator'); в вашем яваскрипта кода.

Теоретически в некоторых браузерах вторая часть может не понадобиться, но для мобильных устройств лучше написать ее, чтобы вы могли быть уверены, что все работает.