Backbone.js making router seo friendly - backbone.js

Question

I am new to backbone.js so this may be an easy question.
The router seems to use semantically sensible urls, but they aren't very user friendly.
In the examples I've seen they use:
local.com/post/id/1
But in wordpress I would opt to rewrite this as:
local.com/2012-11-03-backbone-js-router-question.html
This would be run through a big rewrite table and translated to the right controller/action. I don't want to expose the router to the user that prominently.
My final application for this question is with e-commerce in mind:
cms page local.com/about-us.html
product page local.com/blue-tooth-headset.html
category page local.com/phones.html
product via category page local.com/phones/blue-tooth-headset.html
So my question is, how would one get pretty urls while using backbone.js?
My thoughts on options are:
You don't get seo friendly urls
You have some enormous map, and it has to sit on the client :(
Everytime you are about to change the url you have a quick ajax lookup up for the pretty-url, and you need to wait for the pretty-url to come back before you pushState.
sections are prefixed with a letter ie local.com/p/product-name.html and p actually serves to distinguis which router, another could be c for category

Answer 1

Backbone routes can be mostly anything. About e-commerce, you'd just need to use wordy urls:
<category>/<product-name>
television/samsung-i178
But, that's not really what you should matter about regarding SEO. Google mostly added way less value in URLs keyword after last year "panda" update.
What you should really consider is getting fallback and content served on the page even if javascript isn't enabled. But the trouble there is that you probably don't want to code your site twice: frontend templating/paging engine + plus same thing on the backend.
There's upcoming technologies who'll help leverage this problem using node.js (Mojito, Meteor, etc), but right now they're not the most stable projects out there. And, I think it may be a little early to use these in production; if you don't have a really competent team to get you server going and debug those projects if needed.
Anyway, what I mean is that if SEO weight a lot in your project, just don't use backbone.
Edit :
About what you add to your question, I think that's pretty easy to conceptualize.
In Backbone, you use a variable router, like so:
routes: {
"product/:url" : "product"
}
product: function( prettyUrl ) {
console.log( prettyUrl );
// Then you fetch your server
server.fetch( prettyUrl );
}
Then on your server database, you just fetch your database by the product pretty url, like SELECT * FROM product WHERE prettyurl=$prettyURL (Or something similar to this, been a long time since I used mySQL).
This way, you don't have to keep a map on the client side, you only use the pretty url the server gave you to fetch full product.
So when on your collection you call fetch, the server should return to you:
{
id: 1,
name: "Product XYZ",
prettyUrl: "product-xyz"
},
{
id: 2,
name: "Mac Book Pro",
prettyUrl: "mac-book-pro"
}
This way, every pretty url is managed with his model, not in the router. And that's definitely the way to go to manage such URLs. And that's mostly how does it any Wordpress or Drupal out there. Only they do it on the backend side.

Answer 2

There is an HTML5-only solution which allows you to keep urls pretty within Backbone.
Initialize Backbone.history with pushState set.
http://documentcloud.github.com/backbone/#History-start
Beware:
If your application is not being served from the root url / of your domain, be sure to tell
History where the root really is, as an option:
Backbone.history.start({pushState: true, root: "/public/search/"})
Then call history.navigate like this:
navigateToTodo () {
Backbone.history.navigate('/todos/' + this.model.toJSON().id, {trigger: true});
return this;
},
Or just use conventional href linking throughout your app.
Example and explanation here:
From Hashbangs to HTML5 PushState
Fallback for IE:
Fallback for IE
EDIT: So after a while and getting my head around similar problems now I think I understand your question. What you want is not related to Backbone it is to converting a text like this:
"Marissa Mayer can't stop acquiring things" to this "marissa-mayer-can-t-stop-acquiring..."
**Your question is missleading as you supposed Backbone was doing this for you, which it does not.
So the answer is:
What you need is Urlify (there are others, but not quite as good in my experience).
https://github.com/aliem/urlify
-I'll leave the old answer as it seems to have helped people who searched for this-