When using the HTML5 history mode, like in the "HTML5 Basics" example at http://mtrpcic.github.com/pathjs/html5_basic.html, the initial page load also triggers a Path dispatch. I realise that in a lot of cases this is desirable, but I feel there should be a way to disable this.

A common use case for Path is using it to catch links out and replace them with ajax requests that replace partial content: The initial page is rendered fully and every subsequent click on a link fetches just the content that is new.

However, if you use Path in HTML5-mode, it also triggers an AJAX request for the first request, essentially causing duplicate work. Of course there are ways to hack around this, but it seems to me there should be a more elegant way to solve this.

I have given a simple example below. On the first visit of /pages/test, it says "loading..." and fires off an XHR to /partials/test. This is unnecessary, as the content of /pages/test already contains what it needs prerendered by the server.

Path.map("/pages/:page").to(function(){

    $("#content").html("loading...");

    $.ajax({
      url: "/partials/"+this.params["page"], 
      timeout: 2000,
      success: function(data) {
        $("#content").html(data)
      }
    });
  })

  $(document).ready(function(){
    Path.history.listen();

    $("a").click(function(event){
      event.preventDefault();
      Path.history.pushState({}, "", $(this).attr("href"));
    });
  })

var routes = [
    "#/home",
    "#/obstacles",
    "#/obstacles/:id"
];

Path.map(routes[2]).to(function(){
    app.route(this.path, this.params["id"]);
});

When looping through an array of routes, firefox - firebug throws a

• uncaught exception: Syntax error, unrecognized expression: id

Any reason why this is happening?

Hi Mike,

I'd like to get your thoughts on this. In my application it's necessary for independent modules to map all of their own routes so they can each act independently. This patch enables this so that each call to Path.map pushes the handler onto an action stack, rather than overwriting it.

Path.map('/awesome').to(function() {
  console.log('this is awesome');
});

Path.map('/awesome').to(function() {
  console.log('this is ALSO awesome');
});

Path.history.navigate({}, '', '/awesome');
// this is awesome
// this is ALSO awesome

Before this patch, only the last callback would have been executed.

I Agree that its a fair assumption, but I had to write a workaround for this for my scenario. The simple scenario is that my tabs are hierarchical in naming.

I'm attaching the workaround i currently use in the match function. I know it is not the best code, but it works. It'd be great if you could support this by default.

'match': function (path, parameterize) {
        var params = {}, route = null, possible_routes, slice, i, j, compare;
        for (route in Path.routes.defined) {
            if (route !== null && route !== undefined) {
                route = Path.routes.defined[route];
                possible_routes = route.partition();
                for (j = 0; j < possible_routes.length; j++) {
                    slice = possible_routes[j];
                    compare = path;
                    if (slice.search(/:/) > 0) {
                        for (i = 0; i < slice.split("/").length; i++) {
                            if ((i < compare.split("/").length) && (slice.split("/")[i].charAt(0) === ":")) {
                                params[slice.split('/')[i].replace(/:/, '')] = compare.split("/")[i];
                                compare = compare.replace(compare.split("/")[i], slice.split("/")[i]);
                            }
                        }
                    }
                    if (slice === compare) {
                        if (parameterize) {
                            route.params = params;
                        }
                        return route;
                    }
                }
            }
        }
        if (parameterize) {
            var maxMatchedRoute = null, maxMatches = 0, 
                arr2 = path.split('/');
            for (route in Path.routes.defined) {
                if (route !== null && route !== undefined) {
                    var arr1 = route.split('/');
                    if (arr2.length < arr1.length) {
                        continue;
                    }
                    var len = arr2.length;
                    var matches = 0;
                    for ( var i = 0; i < len; i++) {
                        var ele1 = arr1[i], ele2 = arr2[i]
                        if (typeof ele1 !== "undefined"
                         && typeof ele2 !== "undefined" 
                         && ele1 === ele2) {
                            matches++;
                        }
                    }
                    if (matches > maxMatches) {
                        maxMatches = matches;
                        maxMatchedRoute = route;
                    }
                }
            }
            if (maxMatches) {
                var pathArray = maxMatchedRoute.split('/');
                var i = 0, last = null;
                for (i = maxMatches; i < pathArray.length; i++) {
                    var slice = pathArray[i];
                    if (slice.charAt(0) !== ':') {
                        return null;
                    }
                    last = slice.substr(1);
                    params[last] = arr2[i];

                }
                while (i < arr2.length) {
                    params[last] += '/' + arr2[i];
                    i++;
                }
                Path.routes.defined[maxMatchedRoute].params = params;
            }
            return Path.routes.defined[maxMatchedRoute];
        }
        return null;
    }

Thanks, Sujay

In some previous documentation it seemed like there a default function you could set if no paths matched. I want to use this but it seems to be missing in the current version. I tried using rescue for this but it doesn't work in the same way (doesn't set the window location)

Is there any way to apply a default function to all paths?

Maybe one way to do this is to include the same wildcard functionality as in rails routes using *

Path.map("/*path")

The code was crashing when I entered a page where the #hashvalue was unspecified, and I had a rescue function defined.

The code to fix it was used elsewhere, so I moved it to a helper function, and called it from both.

Tests are updated, but currently there is no test for the Path.root function, because testing the error I had could not be done at the same time. Sometime I will add another test.

This would help DRY out some code so that someone doesn't have to duplicate route maps.

For example ( this is how ExpressJS does it on the server side ):

Path.map("#/venues/:sortorder?").to(function{
    // Then we can do stuff like fn(this.params['sortorder'] || 'default');
});

I would happily fork it and submit the changes to make this work, however my javascript-fu is weak. Looking at the code, I couldn't tell how easily this could be accomplished. So this is just a feature request.

On http://mtrpcic.github.com/pathjs/html5_basic.html there is an instruction to view the source of the page to see what's going on. That won't work in Chrome after clicking on any of push state links, eg Users.

View source in Chrome opens a new tab to a view source url, for example:

view-source:http://mtrpcic.github.com/users

This does a request for http://mtrpcic.github.com/users, then shows the source of the GitHub 404 page.

Hi,

I'm trying to fix an issue, but I'm a little bit lost and maybe you thought about this already.

When you want to open a Path.js link in a new tab you can do it rightclicking in the link and selecting "Open In New Tab" in the Browser, but it's not working clicking on the link with the mousewheel at windows or doing Click + command on Mac OS X.

Do you know why is it happening?

Best regards!

I'm using PathJS's HTML5 pushState capability in an application. I want to be able to trigger actions not only when the user explicitly clicks on a link/form element, but also when the user goes to that page. For example: If the user goes to example.com/do/something, that should be the same as if they went to example.com and clicked a link that triggered "do/something." This is working for me in Chrome, but not Safari, Firefox, or Opera. Even if this is not the intended behavior, it is an inconsistency.

Is this a problem with PathJS or the implementation of the History API? I feel like it must be the former, since Backbone.js can do what I'm trying to do, right?

Thanks, Gerard

Hi,

sorry for using an "issue" like this but can't find any contact info. How are you supposed to handle form posts? Can't find any route setup that will listen on POSTs.

//Daniel

https://github.com/mtrpcic/pathjs/blob/2fe037d6b2d54ab70e0490b90cce16bd5fce9cca/path.js#L56

Paths:#test1/id , #test2/name/desc

Go to #test2/1/2 the params is {id:1,name:1,desc:2} not {name:1,desc:2}.

I love this framework and its handy that a typescript definition file exists for Path.JS . My problem is the getting started page in the wiki does not cover some of the other functions such as Path.Match() so if anyone could find me a way to learn the API completely, that would be perfect.

Even though PathJS available on bower, it does not have proper bower.json with main:{} section. Also the bower.json files are missing on git repository. This is the restructured version of Path JS with proper bower configurations and with a grunt build.

I'm having trouble with relative image urls and links when using pathjs and routing. I am developing in http://localhost/app and on that page, I have relative urls for images (i.e. src="images/some.jpg"). When I navigate to some route (i.e. "test/route/1"), the url changes to http://localhost/app/test/route/1, which is expected. But if I refresh that page on that route, the image no longer works. It is looking for the image at http://localhost/app/test/route/1/images/some.jpg (incorrect location) instead of http://localhost/app/images/some.jpg (correct location). Is there a way to use relative urls for links and image sources when routing with pagejs?

Has anyone had trouble with path: #anythyng/1/1/1

It is used:

Path.map("#anything(/:parameter1)(/:parameter2)(/:parameter3)").to(function(){
  //anything
});

But he doesn't know this path is a valid path.