Search code examples
javascriptbackbone.js

How to match a date path in Backbone router?


js fiddle demoI have a Backbone application where I wish to trigger methods on the router with links like these

<a href="/2015/09/28/do-you-drink-whiskey">link</a>
<a href="/2015/09/29/do-you-drink-beer/">link</a>

Using this code

$(document).on('click', 'a[href^="/"]', function(e){
 e.preventDefault();
 var href = $(e.currentTarget).attr('href');
 Backbone.history.navigate(href, {trigger: true});
}

I try to capture any click on a link that begins with /, which my two links do. By passing the trigger: true option, I understand that I am triggering a route on the router.

In the router, I try to match anything that begins with 2015 (as I understand there is no need to put the initial /)

var R = Backbone.Router.extend({
    routes:{
        "": "list",
        "restaurants/:id": "restoDetails",
        "2015/*": "matchAnything"
    },
    matchAnything: function(){
        alert("yeah, match")
    },
    restoDetails: function() {
        console.log('restoDetails', arguments);
    },
    list: function() {
        console.log('list', arguments);
    }
});
new R;
Backbone.history.start({pushState: true);

The matchAnything method is not getting called when I click the link. Question: How can I use the router to match a link that begins with a date (like I have done with my links)?

Update, my version was based on this code and, in the README.md of that github repo, there is a link to a working demo.


Solution

  • It's better to listen to all hrefs and determine if the link is local or not, since links that begin with / can also be remote links with https/http excluded (lots of examples on SO for checking if a link is local or not).

    It would be nice if you made a Fiddle without runtime errors ;) But anyway here is a working Fiddle: http://jsfiddle.net/ferahl/0hLn0smc/

    You needed to name the part after /2015/, this is sometimes called a "splat" but you could write any word there:

    "2015/*splat": "matchAnything"