投稿記事

Path.js を使ってみた

22 Apr 2016


Page 1

Firebase の authentication 例を見ていたら、 Path.js を使っていた。


早々に試してみた


PathJSは、シングルページ・アプリケーションを作成するときにHashbang や html5 のpushState を使いクライアント・サイドでルーティングを行う軽量なライブラリです。

ここでは、ページ遷移部分を上記の例から取り出して利用してみた。

それと、いくつかのメソッドを試してみた。

Page 2

Path.map("#/page2").enter(func1) 
                   .to(func2)
                   .exit(func3); 
        
  • .map でルートを指定
  • .enter(func)ルートに入るときに関数funccは実行される
  • .to(func)ルートに入ったときに関数funcは実行される
  • .exit(func)ルートから抜けるときに関数funcは実行される

Page 3

Path.map("#/page3").enter([drawDateTime, drawFormatDate])
                   .enter(drawFormatTime).to(prepRoute);
        

enter で呼び出す関数は {.}でつないでもよいし、配列として記述してもよい。

Page 4

(function (jQuery, Path) {
    "use strict";
   $('section').css({"display":"none"});
    // pair our routes to our section elements
    var routeMap = {
            '#/': {
            section: 'page1'
        },
            '#/page2': {
            section: 'page2'
        },
            '#/page3': {
            section: 'page3'
        },
            '#/page4': {
            section: 'page4'
        },
    };
    // store the active form shown on the page
    var activeSection = null;
    function routeTo(route) {
        window.location.href = '#/' + route;
    }
    /// Routing
    ////////////////////////////////////////
    // Handle transitions between routes
    function transitionRoute(path) {
        // grab the config object to get the section element 
        var sectionRoute = routeMap[path];
        // wrap the upcoming section in jQuery
        var upcomingSection = $('#' + sectionRoute.section);
        // if there is no active section then make the current one active
        if (!activeSection) {
            routeTo('');
            activeSection = upcomingSection;
        }
        // hide old section and show new section
        activeSection.hide();
        upcomingSection.show().hide().fadeIn(750);
        // remove any listeners on the soon to be switched section
        activeSection.off();
        // set the new section as the active section
        activeSection = upcomingSection;
    }
    // Set up the transitioning of the route
    function prepRoute() {
        transitionRoute(this.path);
    }
    // Alert 
    function enterPage2() {
        alert("Enter Page2");
    }
    // Alert 
    function exitPage2() {
        alert("Exit Page2");
    }
    function drawDateTime() {
        $('#txtDateTime').append().text(Date());
    }
    function drawFormatDate() {
        var s = "今日の日付は: ";
        // Create a date object.
        var dt = new Date();
        // Get the month, day, and year.
        s += dt.getFullYear() + "/";
        s += (dt.getMonth() + 1) + "/";
        s += dt.getDate();
        $('#txtFormatDate').append().text(s);
    }
    function drawFormatTime() {
        var s = "今の時刻は: ";
        // Create a date object.
        var dt = new Date();
        // Get the month, day, and year.
        s += dt.getHours() + ":";
        s += dt.getMinutes();
        $('#txtFormatTime').append().text(s);
    }
    /// Routes
    ///  #/       - page1
    //   #/paag2  - page2
    //   #/page3  - page3
    //   #/page4  - page4
    Path.map("#/").to(prepRoute);
    Path.map("#/page2").enter(enterPage2).to(prepRoute).exit(exitPage2);
    Path.map("#/page3").enter([drawDateTime, drawFormatDate])
                       .enter(drawFormatTime).to(prepRoute);
    Path.map("#/page4").to(prepRoute);
    Path.root("#/");
    /// Initialize
    ////////////////////////////////////////
    $(function () {
        // Start the router
        Path.listen();
    });
}(window.jQuery, window.Path))