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;
        }

[garygreen]

Are you running this in a browser/node?

[kokujin]

Browser, chrome and FF

[garygreen]

I suspect your using some other js that has prototyped arrays like Array.prototype.someproperty = 'blah'

Can you try using only lightrouter in your app and see if it works?

[kokujin]

I am actually using a shim lib(es5-shim.js) since we have to support older IE versions. But removing it does not help, same problem.

[garygreen]

If you clone this repository and opentests/browser/index.html in your browser, do all the tests pass? I still think it's some dodgy js or even maybe chrome extension that is prototyping an extra key/property onto arrays...

[kokujin]

do I need anything else I called called "http-server" in the tests folder, the server starts up on port 8080 but the tests are not run

passes: 0failures: 0duration: 0s

[garygreen]

Just open tests/browser/index.html in your Chrome browser locally. It should run the tests

[kokujin]

ok, all tests pass, sorry about the delay

passes: 23failures: 0duration: 0.05s

[garygreen]

Just pushed a new version, try 0.2.2 and let me know if it fixes your issue

[kokujin]

Ok,will do. Have you pushed it? The repo ist still showing an old commit

[garygreen]

Yeah I have pushed it, it's on tag 0.2.2 so should be able to pull it down. Master is showing as 2 commits behind, not sure why......

[garygreen]

@kokujin just released new version, does this fix any issue you were having?

[garygreen]

@kokujin I've just released another version, you can match routes manually now with .match(route, callback) which might be more suited to your particular app. Let me know how it goes :-)