我正在尝试编写一个小Cordova
应用。 Fortunatly找到了OnSenUI
,现在正在研究它。但我正面对这个错误:
未捕获(承诺)错误:“html”必须是一个包装元素。 at Object.util.createElement(util.js:147) 在page-loader.js:23
我搜索了很多解决方案,但没有任何方法可以帮助我。
我的整个代码:
<!DOCTYPE html>
<html>
<head>
<title>New App</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/onsenui.css" />
<link rel="stylesheet" href="css/onsen-css-components.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/onsenui.js"></script>
<script src="js/myJs.js"></script>
</head>
<body>
<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 id="ons-list-fetch" onclick="fn.load('fetchPage.html');" tappable> Fetch Data </ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-splitter>
<ons-template id="home.html">
<ons-page id="helloworld-page">
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center"> Main </div>
</ons-toolbar>
<p style="text-align: center; opacity: 0.6; padding-top: 20px;"> Swipe right to open the menu! </p>
<!-- Inputs-->
<h2 style="text-align: center; opacity: 0.6;">Just H2</h2>
<div style="text-align: center; margin-top: 30px;">
<p>
<ons-input id="username" modifier="underbar" placeholder="Username" float></ons-input>
</p>
<p>
<ons-input id="password" modifier="underbar" type="password" placeholder="Password" float></ons-input>
</p>
<p style="margin-top: 30px;">
<ons-button id="btnClickMe">Click Me!</ons-button>
</p>
<section style="padding: 8px">
<ons-button modifier="quiet">Forgot Password</ons-button>
</section>
</div>
<!-- eof Inputs-->
<p style="text-align: center; font-size: 14px; opicity: 0.6"> All rights reserved </p>
</ons-page>
</ons-template>
<!-- fetchPage-->
<ons-template id="fetchPage.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center"> Fetch </div>
</ons-toolbar>
</ons-page>
<div id="divFtechHere">Fetched Data will be shown here</div>
</ons-template>
</body>
</html>
答案 0 :(得分:0)
OMG太简单了。
我在<div id="divFtechHere">
<ons-page>
错误代码:
<!-- FetchPage-->
<ons-template id="fetchPage.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center"> Fetch </div>
</ons-toolbar>
</ons-page>
<div id="divFtechHere">Fetched Data will be shown here</div>
</ons-template>
正确代码:
<ons-template id="fetchPage.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center"> Fetch </div>
</ons-toolbar>
<div id="divFtechHere">Fetched Data will be shown here</div>
</ons-page>
</ons-template>