未捕获(承诺)错误:“html”必须是一个包装元素onsenui

时间:2017-03-23 11:03:15

标签: onsen-ui

我正在尝试编写一个小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>

1 个答案:

答案 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>