Question

我正在使用phonegap和jQuery Mobile开发应用程序。 Phonegap建议使用单一文档结构。由于文档中的5个div或更多不太清楚，我正在尝试将我的页面（div）分成多个文档。一旦phonegap加载应用程序，我想将这些文档插入index.html。

function loadPage(external_document) {
    var docname=external_document+".html";
    $.get(docname, function(data) {
        console.log(docname+" loading");
        $("body").append($(data).find("body"));
        $("head").append($(data).find("head"));
        console.log(docname+" loaded");
    });

}

document.addEventListener("deviceready", function(){
    loadPage("DialogCredentials");
}, false);

DialogCredentials.html

<html>
<head>
     <script type="text/javascript" src="js/DialogCredentials.js"></script>
</head>
<body>  
    <div data-role="page" id="dlg_credentials">
    <div data-role="header"><h1>Login</h1></div>
    <div data-role="content">
    ... 
</div>
</div><!-- /page -->
</body>
</html>

一旦loadPage被执行，我的主文档的dom中应该有一个<div id="dlg_credentials"…和相应的javascript标记。但事实并非如此。 Web检查器中未显示任何错误。那么我在这里做错了什么？

Answer 1

动态加载是几个Javascript框架的一个特性。例如，AngularJS和Backbone.js。也许看看他们加载多个视图的方法？

我之前曾在一个应用程序上工作，通过为index.html的每个视图添加一个空div，然后根据需要为每个视图动态加载Javascript。视图的Javascript负责将HTML呈现为该视图的div。

JQuery：将多个页面合并为一个

1 个答案: