Fat Free router blocks Backbone router, how/when does Backbone router.js work?

Question

I have a Backbonejs (BB) project setup. I have Fat Free Framework (F3) running for the server-side code. As I ask this, please keep in mind I'm just learning these two web dev tools: When does the BB router do any routing? I have a link in a web page that matches a route in the BB router, but the F3 router keeps trying to handle it and failing. How do these two routers work together and not interfere?

Thanks a lot for your help.

Answer 1

If you are not using pushState, then the backbones routes are easy to differentiate from the server routes:

• /route1
• /route2
• /route1#route/a
• /route1#route/b

The part before the hash is the one transmitted to the server (F3 routes). The part after the hash corresponds to the backbone routes.

//F3 routing
$f3->route('GET /route1',…)
$f3->route('GET /route2',…)

//Backbone routing
routes: {
  "route/a": "routeA",
  "route/b": "routeB",
}

Note that the Backbone router doesn't generate any HTTP request to the server (unless you specifically define it of course).

What generates automatically HTTP requests is the Backbone model. A backbone model is mapped to a server resource using urlRoot. The methods fetch(), save() and destroy() are then mapped respectively to the GET, PUT and DELETE HTTP methods.

Check this example:

userModel = Backbone.Model.extend({
  urlRoot: '/user'
});
var user=new userModel({id:123});
user.fetch();// GET /user/123
user.save();// PUT /user/123
user.destroy();// DELETE /user/123

On the server side, you can easily map a User class like this:

$f3->map('/user/@id','User');
class User {
  function get($f3,$args){…}
  function put($f3,$args){…}
  function delete($f3,$args){…}
}