JQM - Phonegap - Définir une architecture page par page

**LaurentC33** · 24/12/2013, 11h04

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**LaurentC33** · 24/12/2013, 11h46

Bon ben coup classique, je publie mon problème, et du coup un peu de recul et la solution est évidente :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
$(document).on('pageinit', '#indexPage', function(){    
 
    $(this).on('click', '#test-button',function() {
            alert('Clicked');
    }); 
 
});

JQM - Phonegap - Définir une architecture page par page [UI Mobile]

jQuery

Vue hybride

Discussions similaires

Partager

Partager