Thursday, March 24, 2011

Routing in Javascript

(...)route.js is the smallest, easiest way to create stateful navigation based on unique ... route.js doesn't impose any other libraries or formats, handlers are ...
(...)route.js




Indeed, it' is a very nice piece of work
Here is a little example

<!DOCTYPE>
<html>
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/route.js" type="text/javascript"></script>
    <script>

        var nbrLoadedPages = 0;
        var pageNames = [];

        var staticPages = { "accueil": "Pages/accueil.htm",
                            "gestion": "Pages/gestion.htm",
                            "admin": "Pages/admin.htm"
                          };     
        var pages = {}


        displayPage = function (p) {
            var np = p.param
            if (pages[np]) {
                $("#page").html(pages[p.param]);
                return false;
            }          
        }


        setupRoutes = function () {
            route('#/page/:param').bind(displayPage);            
        }

        setupRouting = function () {
            setupRoutes();
            hashObject = {};
            hashObject._hashchange_last = '';
            hashObject._onhashchange = function () {
                if (hashObject._hashchange_last != location.hash) {
                    hashObject._hashchange_last = location.hash;
                    route(location.hash).run();
                }
            }
            setInterval(function () { hashObject._onhashchange(); }, 50);
        }

        
        initPages = function () {
            for (var key in staticPages) {
                if (staticPages.hasOwnProperty(key)) {
                    pages[key] = null;
                } 
            }
        }

        loadPages = function () {
            $.each(pages, function (k) {
                $.get(staticPages[k], (function (r) { pages[k] = r; nbrLoadedPages += 1; }));
            });
            checkLoading = setInterval(checkIfLoaded, 50);
        }

        checkIfLoaded = function () {
            if (nbrLoadedPages < staticPages.length) {
                // Waiting...
            }
            else {
                $("#main").css("display", "block");
                clearInterval(checkLoading);
                setupRouting();
            }
        }


        $(document).ready(function () {
            initPages();
            loadPages();
        });
    </script>
</head>
<body>
    <div id="log">
    </div>
    <div id="main" style="display: none">
        <center>
            <div>
                <h1>
                    <a href="#/page/accueil">Accueil</a> 
                    <a href="#/page/gestion">Gestion</a> 
                    <a href="#/page/admin">Administration</a>                       
                </h1>
            </div>
        </center>
        <div id="page" />
    </div>
</body>
</html>

1 comment: