温泉UI-回到家 [英] Onsen-ui - back to home
问题描述
我想不使用菜单而从page4.html回到家，但出现此错误
I want to go back home from page4.html without using the menu, but I get this error
错误:您不能为"ons-navigator"提供任何"ons-page"元素
Error: You can not supply no "ons-page" element to "ons-navigator
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sliding Menu</title>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css'>
</head>
<body onload="_l='t';">
<ons-sliding-menu
menu-page="menu.html" main-page="home.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page modifier="menu-page">
<ons-toolbar modifier="transparent"></ons-toolbar>
<ons-list class="menu-list">
<ons-list-item class="menu-item" onclick="menu.setMainPage('home.html', {closeMenu: true})">
<ons-icon icon="fa-plus"></ons-icon>
Home
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="home.html">
<ons-navigator var="myNav">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Home</div>
</ons-toolbar>
<ons-list>
<ons-list-item onclick="myNav.pushPage('page1.html')">
go to page 1
</ons-list-item>
<ons-list-item onclick="myNav.pushPage('page2.html')">
go to page 2
</ons-list-item>
</ons-list>
</ons-page>
</ons-navigator>
</ons-template>
<ons-template id="page1.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Page1</div>
</ons-toolbar>
<ons-list>
<ons-list-item onclick="myNav.pushPage('page3.html')">
Page3
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Page2</div>
</ons-toolbar>
<ons-list>
<ons-list-item onclick="myNav.popPage();">
back to Home
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="page3.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Page3</div>
</ons-toolbar>
<ons-list>
<ons-list-item onclick="myNav.pushPage('page4.html');">
go to page 4
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="page4.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Page4</div>
</ons-toolbar>
<ons-list>
<ons-list-item onclick="myNav.pushPage('home.html');">
back to Home
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js'></script>
<script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js'></script>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-6c99970ade81e43be51fa877be0f7600.js"></script>
<script>
ons.bootstrap();
</script>
</body>
</html>
您可以尝试使用Codepen http://codepen.io/marcocalta/pen/azeozL 谢谢！
You can try on codepen http://codepen.io/marcocalta/pen/azeozL Thank you!
推荐答案
之所以不起作用，是因为您正在使用resetToPage()转到不是<ons-page>元素的home.html.
The reason why it doesn't work is that you're using resetToPage() to go to home.html which isn't an <ons-page> element.
一种解决方法是从导航器中拉出<ons-page>元素并将其放在模板中.如果将其命名为page0.html，则可以执行resetToPage('page0.html').
One way to solve it would be to pull out the <ons-page> element from the navigator and put it in a template. If you name it page0.html you can do resetToPage('page0.html').
我已经更新了您的Codepen: http://codepen.io/argelius/pen/XJvWGL
I've updated your Codepen: http://codepen.io/argelius/pen/XJvWGL
这篇关于温泉UI-回到家的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
