Prevent navigation?

[kokujin]

I would like lightrouter to detect the page that a user is on and allow me to run certain code blocks, is it possible to make lightrouter prevent navigation to a matched route?

Thanks!

[garygreen]

What's your code so far?

[kokujin]

Have'nt written anything yet, I was going through the docs

[garygreen]

By the sounds of it your trying lightrouter in a single page app?

[kokujin]

its actually a hybrid. Some parts mimic a single page app, some parts traditional. I thought I could run javascript code conditionally depending on the URL using lightrouters matching.

[garygreen]

You can easily do it with traditional path url, but if using in a single page app you would have to create a bit of additional code to listen for hashbang changes, run router, add to history if matching etc. Lots of other javascript routers are more 'heavy weight' and do all this for you, lightrouter is more of a foundation for matching paths and calling code conditionally.

I have been meaning to create a plugin for light router to make it easier to integrate it will SPA out of the box, something definitely on the todo list.

[kokujin]

Yeah, actually, my focus is only running code based on a path on the traditional urls. No pushstate or hashbang sniffing. How can I achieve this?

[garygreen]

In which case it's very easy, the docs show exactly how to use the lightrouter. What part of the docs are you having trouble understanding? (Maybe needs improvement)

[kokujin]

Here is an example of what I want to achieve using another library called byroads(https://github.com/W3Max/byroads.js), I can declare a route, and then test if it matches. Navigation is not triggered.

 var byroads = window.returnExports;
 var pageRE = new RegExp('^/(.*)-xk([0-9]*).jsp(.*)');
 var route = byroads.addRoute(pageRE);
 console.log('match ',route.match('foo')); // false
 console.log('match ', route.match(location.pathname)); // true, if pathname matches regex

I could not find an example that I could use for my case.

[garygreen]

It's technically possible to test if a specific route matches like that, but this router does it generally like:

var router = new LightRouter({
    type: 'path',
    path: 'testing-xk500.jsptesting'
});
router.add(/^(.*)-xk([0-9]*).jsp(.*)/, function(params) {
    console.log('matched', params);
});
router.run();

You don't need to supply path to lightrouter it will automatically detect it from the url's path OR hash if you specify type as hash (see examples from docs). I've only added it for testing in the example above..

[garygreen]

If you wanted to test the routes manually you could do something like:

var router = new LightRouter();
router.add(/^(.*)-xk([0-9]*).jsp(.*)/, function() { });

for (var i = 0; i < router.routes.length; i++)
{
    console.log(router.routes[i].test('foo')); // false
}

Or if your only testing one route:

var router = new LightRouter({
    type: 'path',
    routes: {
        '^(.*)-xk([0-9]*).jsp(.*)': function() { }
    }
});

console.log(router.routes[0].test('foo'));

[kokujin]

Nice! Thanks

[kokujin]

I spoke to soon, the example below causes an error

var router = new LightRouter({
    type: 'path'
});
router.add(/^(.*)-xk([0-9]*).jsp(.*)/, function(params) {
    console.log('matched', params);
});
router.run();

 Uncaught TypeError: undefined is not a function

The recursive call to "run" fails

        run: function() {
            var url = this.getUrl(), route;

            for (var i in this.routes)
            {
                console.log('///////');
                // Get the route
                route = this.routes[i];

                // Test and run the route if it matches
                route.test(url) && route.run(); <--- fails
                console.log('|||||||');
            }
            return this;
        }

[kokujin]

This works

run: function() {
            var url = this.getUrl(), route;

            for (var i in this.routes)
            {
                // Get the route
                route = this.routes[i];
                if( this.routes.hasOwnProperty(i) ){
                    // Test and run the route if it matches
                    route.test(url) && route.run();
                }                   
            }
            return this;
        }