Bonjour,
Je suis en train d'essayer de comprendre le fonctionnement des SPA.
Ce que j'ai fait : une page index.html qui contient un div identifié comme "app", que je viens mettre à jour en JS.
Code :
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
- <meta name="format-detection" content="telephone=no">
- <meta name="msapplication-tap-highlight" content="no">
- <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
- <link rel="shortcut icon" href="#" />
- <title>TEST</title>
- <script type="text/javascript">
- window.onload = function () {
- //Au lancement de l'application, on appelle Init()
- Init();
- };
- </script>
- </head>
- <body>
- <div id="app">
- </div>
- <script type="text/javascript" src="js/router.js"></script>
- <script type="text/javascript" src="js/app_r.js"></script>
- <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
- </body>
- </html>
|
J'ai ensuite utilisé ce tuto pour créer un routeur : https://github.com/krasimir/navigo
Puis j'ai créé, pour commencer, 2 routes dans mon fichier app_r.js :
Code :
- router
- .on('/Init', function() {
- //window.alert("dans le routeur INIT" );
- var htmlRender =
- '<div>'
- + '<label>' + T("init" ) + '</label>'
- + '<input id="keywords" type="text" placeholder=' + T("init" ) + '>'
- + '<input id="search" type="button" value=' + T("Go search" ) + ' onclick="SearchPage()"/>'
- + '</div>'
- document.getElementById("app" ).innerHTML = htmlRender;
- })
- .resolve();
- router
- .on('/SearchPage', function() {
- //window.alert("dans le routeur SEARCH PAGE" );
- var htmlRender =
- '<div>'
- + '<label>' + T("search" ) + '</label>'
- + '<input id="keywords" type="text" placeholder=' + T("your_search" ) + '>'
- + '<input id="search" type="button" value=' + T("search_action" ) + ' onclick="Init()"/>'
- + '</div>'
- document.getElementById("app" ).innerHTML = htmlRender;
- })
- .resolve();
|
et j'ai 2 fonctions dans mon app_r.js :
Code :
- function Init() {
- //window.alert("Appel de init" );
- router.navigate('/Init');
- }
- function SearchPage() {
- //window.alert("Appel de SearchPage" );
- router.navigate('/SearchPage');
- }
|
Jusque là, tout se passe bien, lorsque je navigue vers localhost/test/index.html, je suis bien redirigé vers /Init, et que je clique sur le bouton "search" je vais bien sur /SearchPage
Par contre, mon problème se présente lorsque je saisis directement dans ma barre d'adresse localhost/test/SearchPage ou localhost/test/Init, dans ce cas, je ne passe pas par le processus de routage, et j'arrive donc sur Not Found.
Est-ce que vous voyez quelque chose à faire pour modifier ce comportement ?
Merci,
