如何组织Phonegap HTML文件

Question

如何组织Phonegap HTML文件

Hen*_*son 3 html template-engine cordova codekit pug

我正在使用Phonegap构建一个iPad应用程序.

该应用程序应该是脱机的(除了表单提交),因此它将主要具有静态页面,因此我将拥有大量HTML文件,因为我没有使用JS MVC/Require JS来最小化复杂性.我看得越多,它基本上是一个包含在Phonegap中的静态网站来构建应用程序.

由于我将拥有大量的HTML文件,如果我没有使用任何模板引擎,管理(例如)页眉/页脚中的更改将是一件痛苦的事.到目前为止,我正在使用Codekit将Jade文件编译为HTML,并且它运行良好,我只使用Jade进行布局/块/包含功能和HTML编译.

我不喜欢使用Jade的一件事是,如果你的文件有很多嵌套的HTML标签(例如一个标有Zurb Foundation/Twitter Bootstrap的复杂表单设计),那么突然Jade看起来不再那么干净了.

不过,我认为必须有更好的方法来做到这一点.你们有没有用Phonegap完成一个大多数静态的页面应用程序？还有更好的建议吗？

谢谢

Answer 1

T.B*_*aba 8

你可以使用1个文件,将数据保存在sqlite中或保存为JS文件中的变量.代码应该是这样的:

<!doctype html>
<html>
<head></head>
<body>
<div id="page1" class="page">...</div>
<div id="page2" class="page">...</div>
<div id="page3" class="page">...</div>
<div id="page4" class="page">...</div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

然后你可以在js文件中创建一个"navigate(page_id)"函数:

public function navigate(pageid){
$('page').hide();
if(pageid == 'page1'){
  $('#'+pageid).show();
  // get data and append it in the div.
}
...
}

Run Code Online (Sandbox Code Playgroud)

肯定你可以使用Jquery Mobile,但它会强制你使用预定义的模板,我个人不使用它,因为编写我自己的模板要好得多,可能会提供更多选项.

归档时间：	12 年，8 月前
查看次数：	5522 次
最近记录：	12 年，8 月前