Uncaught (in promise) Error: "html" must be one wrapper element onsenui

Question

我正在尝试编写一个小型 Cordova 应用程序。幸运地找到了 OnSenUI，现在正在努力。但我面临这个错误：

Uncaught (in promise) Error: "html" must be one wrapper element. at Object.util.createElement (util.js:147) at 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>

Answer 1

天哪，太简单了。

我在 <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>

Uncaught (in promise) Error: "html" must be one wrapper element onsenui

Uncaught (in promise) Error: "html" must be one wrapper element onsenui

onsen-ui