JQM - Phonegap - Définir une architecture page par page
Bonjour,
Je suis en train de développer une application mobile avec PhoneGap (Apache Cordova maintenant) et jquery mobile.
Cette application contient plusieurs pages.
J'aimerais avoir du code jquery/Js vraiment dédié à chaque page.
Voici un exemple concret de ce qui me gène.
index.html
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!doctype html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="js/custom.js"></script>
</head>
<body>
<div data-role="page" id="indexPage">
<div data-role="header">
<h1>Page principale</h1>
</div><!-- /header -->
<div data-role="content">
<a href="pageTest.html" data-role="button">AUTRE PAGE</a>
<a href="#" id="test-button" data-role="button">TEST</a>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html> |
pageTest.html
Code:
1
2
3
4
5
6
7
8
9
10
| <div data-role="page" id="testPage">
<div data-role="header">
<h1>Autre page</h1>
</div><!-- /header -->
<div data-role="content">
<a href="#" id="test-button" data-role="button">TEST</a>
</div><!-- /content -->
</div><!-- / |
Le javascript custom.js
Code:
1
2
3
4
5
6
7
8
9
10
11
| $(document).on('pagebeforeshow', '#indexPage', function(){
$(document).on('click', '#test-button',function(e) {
if(e.handled !== true) // This will prevent event triggering more then once
{
alert('Clicked');
event.handled = true;
}
});
}); |
Quand on arrive sur la page d'index, et que l'on clique sur le bouton test, l'alert 'clicked' apparaît.
Si on va sur la page suivante, et que l'on clique sur le bouton, l'alert 'clicked' apparaît également.
Forcement, car $(document).on('click', '#test-button',function(e) {}) est exécuté au chargement de la première page, et l'écouter reste actif sur toute la durée de l'application.
La solution me direz-vous, est de rajouter au code javascript :
Code:
1
2
3
| $(document).on('pagebeforehide', '#indexPage', function(){
$(document).off('click', '#test-button');
}); |
Ceci stoppe l'écouteur de l’événement avant le changement de page.
Mais lorsque l'on a des pages contenant une multitude d'écouteurs d’événements, les stopper à chaque fois rajoute du code au js, et ça deviens assez lourd. Existe t'il une solution plus simple ?
Sinon, définir des ID sous la forme nomDeLaPage_ID. Mais ne pas stopper tous ces écouteurs me gène énormément.
Est-t'il aussi possible d'associer un fichier js par page JQM ? J'ai essayé mais en vain.
En fait, je veux vraiment sectoriser mon code, sans que le code js de la page A interfère avec le code js de la page B
