Monaca用温泉UI打开新页面

Question

我有以下代码完成。我在index.html中有<ons-splitter>。

我想用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. 在你的JavaScript代码添加var myNavigator = document.getElementById('myNavigator');。

理论上，在某些浏览器中，第二部分可能不是必需的，但对于移动设备，最好是编写它，以便确保一切正常。