I just discovered onsen ui and I really like the design and the feeling of it.
I have a problem, though:
Here it says: "Instead of creating menu.html and content.html in separate files, you can also define the page content in the same page."
I don't like to have my whole app in one html file so I tried to put each template into a separate file. This is my file structure:
This is my tabbar:
<ons-tabbar-item active="true" page="products.html">
<ons-icon icon="ion-home" class="tab-icon"></ons-icon>
<ons-icon icon="ion-gear-a" class="tab-icon"></ons-icon>
contents of services.html (products.html is similar):
Now, when the app loads (Firefox, Chrome, iOS emulator) it will display the tabbar and empty content.
In the console you can see that the external html files have not been loaded yet.
If I click on Services, the browser gets the services.html file, but it is not displayed. I click on Products, the products.html file gets loaded, but not displayed.
Finally: If I click on Services the second time, the contents of the external html file are being displayed correctly.
Is this a bug? Is there a workaround? I tried loading the pages into $templateCache on the ons.ready() event. They were successfully loaded, but again not displayed until the second click...
Would be a shame if a great framework like this would not offer splitting a project into multiple files.
<ons-template> tag. It's only needed if you define the templates in