初始化多页jQuery Mobile的最佳方法 [英] Best way of initialize multi-page jQuery Mobile
问题描述
这有点令人困惑，所以我想知道当今用于初始化多页面应用程序的正确方法.
This is a bit confusing so I'd like to know what the correct way is nowadays, for initialize your multi-page app.
<head>
// include multiple JS files
<script>
// page init
</script>
</head>
对于我尝试过的页面初始化:
For page init i've tried:
$(function() {
// or
$("div[data-role='page']").on("pagecreate", function() {
// or
$(document).on("pagecreate", function() {
我注意到，包含JS文件在页面初始化之前全部运行".而且不可能从JS文件中在页面初始化"中调用函数……现在，它们看上去都像这样:
I've noticed that the include JS files are all "run" before the page init. And calling a function in "page init" from a JS-file isn't possible... Right now they all look like:
// ab.js
function a() {}
function b() {}
// so on
JS文件中的所有函数也都应该位于某种init内吗?喜欢:
Should all functions in the JS files also be inside some sort of init? Like:
// JS file ab.js
$(function()
{
function a() {}
function b() {}
});
这个问题可能还不清楚，但我只是感到困惑，而且由于JQM一直在变化，所以我想知道今天的最佳"方式是什么....
This question might be a bit unclear, but I'm just confused, and since JQM changes all the time I'd like to know what the "best" way is today....
推荐答案
首先，您需要了解jQuery Mobile 1.4事件之间的区别；在 page 上一次发射的那些，在 pagecontainer 上连续发射的.
First of all, you need to know the difference between jQuery Mobile 1.4 events; the ones that emit once on page and the ones emit continuously on pagecontainer.
要添加侦听器，例如click，tap，change ...等将它们及其 custom 函数包装在pagecreate中.该事件每页触发一次，因此您需要指定#pageID以便仅将那些 listeners 添加到该页面.如果您无法指定页面，则每当在页面上发出pagecreate时，就会一次又一次添加那些 listeners .
To add listeners, e.g. click, tap, change...etc. Wrap them and their custom function in pagecreate. That event fires once per page, so you need to specify #pageID in order to add those listeners to that page only. If you fail to specify a page, those listeners will be added again and again whenever pagecreate is emitted on a page.
您还可以使用pagecreate来操纵DOM并动态注入元素.
You can as well use pagecreate to manipulate DOM and inject elements dynamically.
$(document).on("pagecreate", "#pageID", function () {
<!-- listeners -->
});
要在显示/隐藏页面时操作DOM，您需要监听 pagecontainer 事件.这些事件会在 pagecontainer 上持续触发，因此，在此处添加侦听器不是一个好主意.使用它们可以添加，删除，隐藏，显示，重置...等，但是，新的 pagecontainer 事件不能附加到特定的#pageID.您需要检查哪个页面处于活动状态或哪个页面将被隐藏.
To manipulate DOM whenever page is shown/hidden, you need to listen to pagecontainer events. Those events fire continuously on pagecontainer, thus, it isn't a good idea to add listeners here. Use them to add, remove, hide, show, reset...etc, however, the new pagecontainer events can't be attached to a specific #pageID. You'll need to check which page is active or which page is going to be hidden.
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),
activePageID = activePage[0].id;
if (activePageId == "pageA") {
$(elm1).hide();
$(elm2).show();
}
});
更新
自执行功能 $(function () { });的使用仅限于jQM中的特定情况.它们用于初始化可以在外部使用的小部件，即面板，工具栏和弹出窗口.
Update
Usage of Self-Executing Functions $(function () { }); is limited to specific cases in jQM. They are used to initialize widgets that can be used externally, i.e. Panels, Toolbars and Popup.
包装在$(function () { });中的代码将在加载后立即执行.
Code wrapped in $(function () { }); will be executed as soon as it is loaded.
这篇关于初始化多页jQuery Mobile的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
