htmlhybrid-mobile-apponsen-ui

how to use multiple html in onsenui navigator


I am facing the same problem as "How to use multiple html files in onsenui" but the solution did not work for me.

I have 2 html files i am trying to navigate to.

index.html

<ons-page>
    <ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator>
    <template id="page1.html">
      <ons-page id="page1">
         <ons-button onclick="myNavigator.pushPage('home.html')">home</ons-button>
      </ons-page>
    </template>
</ons-page>

home.html

<ons-page id="page2">
  <ons-toolbar>
      <div class="left">
          <ons-back-button></ons-back-button>
      </div>
  </ons-toolbar>
</ons-page>

When i click on "home" button i get an error:

Uncaught (in promise) Error: [Onsen UI] HTML template must contain a single root element at Object.Q.throw (onsenui.min.js:2) at Object.Q.createElement (onsenui.min.js:2) at onsenui.min.js:2

I tried adding template and html body to home.html but I got different errors. Is there a way to place templates in different html files?


Solution

  • ughghgh the issue was due to http-server caching my pages in node.js!