mobile-router.js

mobile-router.js — A lightweight single page bone for mobile web App

Online docs

DEMO - source code

require.js DEMO - source code

The mobile-router.js-demo is a simple mobile web app demo for mobile-router.js.

mobile-router.js-sample - A mobile-router.js demo like ui-router sample

中文 README

Less than 9k when gzipped

How can i install it?

Download a latest build from https://github.com/dolymood/mobile-router.js/releases it contains development and minified production files in build/ folder.

or use npm

npm install mobile-router.js

or use git clone

git clone https://github.com/dolymood/mobile-router.js.git

How can i use it?

M.router.init([
    {
        path: '/', // route path
        cacheTemplate: false, // cacheTemplate option for current route
        animation: true, // animation option for current route
        aniClass: 'slideup', // switching effects option for current route
        getTemplate: function() { // sync
            return '/index template content';
        },
        onActive: function() { // 1.5.5+ // called when the route is actived, even before create `page-view` element
 
        },
        callback: function() { // called after the page has been shown
            if (this.cached) return; // the page was cached in document.
            // do something ...
        },
        onDestroy: function() {
            // destroy
        },
        onEnter: function(paramName) { // 1.5.3+ // called when the page will show
 
        },
        onLeave: function() { // 1.5.3+ // called when the page will hide
 
        }
    },
    {
        path: '/m/:paramName',
        getTemplate: function(cb) { // async
            var that = this;
            // that.params - params info
            // that.query - query info
            setTimeout(function() {
                cb('/m/' + that.params.paramName + ' template content');
            }, 200);
        },
        callback: function(paramName) {
            if (this.cached) return;
            // do something ...
        },
        onDestroy: function() {
            // destroy
        }
    },
    { // support redirectTo , string url or function (1.5.5+)
        path: '/redirectTo/:rtPath',
        redirectPushState: false, // default true, enable `pushState` when redirectTo is actived
        redirectTo: function(rtPath) {
            console.log('redirectTo', arguments, this);
            return '/' + rtPath;
        }
    },
    { // support redirectTo , string url or function (1.5.5+)
        // if redirectTo route have getTemplate then the `page-view` will
        // be created, looks like a normal route. The redirectTo will be actived
        // after the route's callback is called
        path: '/contacts',
        getTemplate: contacts.getTemplate,
        onEnter: contacts.onEnter,
        onLeave: contacts.onLeave,
        callback: contacts.controller,
        onDestroy: contacts.onDestroy,
 
        redirectTo: '/contacts/list',
        redirectPushState: false,
 
        children: { // Nested routes & views! (1.5.0+)
            viewsSelector: '.content',
            cacheViewsNum: 1,
            routes: [
                {
                    // all contacts
                    path: '/list',
                    getTemplate: list.getTemplate,
                    onEnter: list.onEnter,
                    onLeave: list.onLeave,
                    callback: list.controller,
                    onDestroy: list.onDestroy
                }
            ]
        }
    },
    {
        path: '/d',
        getTemplate: def.getTemplate,
        onEnter: def.onEnter,
        onLeave: def.onLeave,
        callback: def.controller,
        onDestroy: def.onDestroy,
 
        children: {
            viewsSelector: '.content',
            cacheViewsNum: 1,
            routes: [
                {
                    // sub default route
                    path: '/',
                    getTemplate: defSub.getTemplate,
                    onEnter: defSub.onEnter,
                    onLeave: defSub.onLeave,
                    callback: defSub.controller,
                    onDestroy: defSub.onDestroy
                }
            ]
        }
    },
    { // Nested routes & views! (1.5.0+)
        path: '/b/:bid',
        getTemplate: function(cb) {
            var path = this.path.substr(1);
            setTimeout(function() {
                var lis = '';
                var t;
                // build sub view link
                for (var i = 1; i <= 4; i++) {
                    t = path + '/s' + i;
                    lis += '<li><a href="' + t + '">/' + t + '</a></li>';
                    // or: (looks like set `enablePushState:false`, do not change `location`)
                    // lis += '<li><a href="#" data-href="' + t + '">/' + t + '</a></li>';
                }
                cb(
                    '<ul class="nav">' + lis + '</ul>'
                );
            }, 200);
        },
        callback: function() {
            console.log('callback:/b', this, arguments);
        },
        onDestroy: function() {
            console.log('destroy:/b', this, arguments);
        },
 
        children: { // config for nested routes & views! (1.5.0+)
            /* these configs, default inherit form parent config */
            viewsSelector: '',
            viewClass: 'sub-view-b',
            maskClass: 'mask',
            showLoading: true,
            cacheViewsNum: 3,
            cacheTemplate: true,
            animation: true,
            aniClass: 'slide',
 
            routes: [
                {
                    path: '/:subB', // '/b/:bid/:subB'
                    /* config for current sub route */
                    cacheTemplate: false,
                    animation: true,
                    aniClass: 'slideup',
                    getTemplate: function(cb) {
                        var that = this;
                        setTimeout(function() {
                            cb('<div>' + that.path + '<p>sub content</p></div>');
                        }, 200);
                    },
                    callback: function() {
                        console.log('sub callback b', this, arguments);
                    },
                    onDestroy: function() {
                        console.log('sub destroy b', this, arguments);
                    }
                }
            ]
            
        }
    }
], {
    /** Global configs  */
    /*cache tempaltes or not*/
    cacheTemplate: true,
 
    /*views container's selector. Default document.body*/
    viewsSelector: '',
 
    /*view class. Each page view will have a default class `page-view`, the `viewClass` option's value will be appended to the page view element's class */
    viewClass: 'page-view',
 
    /*use animation or not*/
    animation: true,
    /*switching effects*/
    aniClass: 'slide',
 
    /*mask class for loading*/
    maskClass: 'mask',
    /*show loading or not*/
    showLoading: true,
 
    /*cache views number. Default 3*/
    cacheViewsNum: 3
});
 
// Or like this
M.router.add('/ddd/{dddID:int}', function(dddID) {
    // callback
}, { // options
    cacheTemplate: true,
    getTemplate: function() {
        return '/ddd/' + this.params.dddID;
    },
    onDestroy: function() {
        // destroy
    }
});
 
/* global route change events */
/* `routeChangeStart` event, trigged before a route change. */
M.router.on('routeChangeStart', function(currentRouteState) {
    
});
/*`routeChangeEnd` event, trigged after a route changed and the page has been shown.*/
M.router.on('routeChangeEnd', function(currentRouteState) {
    
});
 
//  start history
M.history.start({
    base: '/', // base path of history. Default the url base in the head of your main html file (<base href="/my-base">) or '/'
    enablePushState: true, // enable pushstate or not (less that 2.x)
    // (2.0.0+)
    // set `history`, `hashbang` or `abstract`
    // default `hashbang` 
    history: true,
    // or
    hashbang: true,
    // or
    abstract: true
});
 

Advantages?

• Lightweight, Easy.

• Nested routes & views (1.5.0+).

• No Dependencies. You can use it with jquery, zepto, iscroll or others.

• Cache templates automatically.

• Good for SEO. You can render pages on server.

• Cache pages automatically. Default cache pages number is 3.

• Switching pages use CSS animation.

• History mode: history, hashbang or abstract

About some configs

The priority of get animation, aniClass or cacheTemplate config's value is:

`data-xxx` -> route config -> global config

About examples/

• index.html: basic usage, getTemplate config, and data-rel=back attribute config on link element for reverse animation direction.

• index1.html: link element's data-href attribute config (as same as abstract=true) , and disable one route animation.

• index2.html: disable animation.

• index3.html: disable cacheTemplate.

• index4.html: set global aniClass.

• index5.html: set aniClass in two ways.

• index6.html: set cacheTemplate of one route.

• index7.html: set M.history config abstract=true.

• index8.html: nested routes and views.

• requirejs/: use require.js

About SEO

The server can response HTML with cpmplete content

<div class="page-view"><h2>content rendered by the server</h2></div>

License

The MIT License