HipsterRouter class
class HipsterRouter { /** * The router exposes named events on which listeners can wait. For example, * if the router has a "page" route, the event will be available on the * 'route:page' event: * * HipsterRouter app = new MyRouter(); * app. * on['route:page']. * add((num) { * print("Routed to page: $num"); * }); */ RouterEvents on; /** * Application routers must subclass [HipsterRouter], definining at least the * [routes] getter: * * class MyRouter extends HipsterRouter { * List get routes() => * [ * ['page/:num', pageNum, 'page'] * ]; * // * pageNum(num) { * var el = document.query('body'); * el.innerHTML = _pageNumTemplate(num); * } * } * * Start the router by creating an instance of the routing class and by * telling [HipsterHistory] to start listening for pushState events: * * HipsterRouter app = new MyRouter(); * HipsterHistory.startHistory(); */ HipsterRouter() { on = new RouterEvents(); this._initializeRoutes(); } /** * As shown in the constructor example, each route must include three values: * * * A string representation of the route, which can include placeholders (e.g. "page:num") * * The method to be invoked when the route is matched * * A string that names the event that is generated for [on]. */ List get routes() => []; _initializeRoutes() { routes.forEach((route) { HipsterHistory.route(_routeToRegExp(route[0]), (fragment) { Match params = _routeToRegExp(route[0]).firstMatch(fragment); String event_name = (route.length == 3) ? "route:${route[2]}" : "default"; if (params.groupCount() == 0) { route[1](); this.on[event_name].dispatch(); } else if (params.groupCount() == 1) { route[1](params[1]); this.on[event_name].dispatch(params[1]); } else if (params.groupCount() == 2) { route[1](params[1], params[2]); this.on[event_name].dispatch(params[1], params[2]); } else if (params.groupCount() == 3) { route[1](params[1], params[2], params[3]); this.on[event_name].dispatch(params[1], params[2], params[3]); } else { throw new WrongArgumentCountException(); } }); }); } _routeToRegExp(matcher) { var bits = matcher.split('/').map((chunk) { if (chunk.startsWith(':')) return '([^\/]+)'; return chunk; }); var regex = ''; for (var bit in bits) { regex += bit; regex += '/'; } return new RegExp(regex.substring(0, regex.length-1)); } }
Constructors
new HipsterRouter() #
Application routers must subclass HipsterRouter, definining at least the routes getter:
class MyRouter extends HipsterRouter {
List get routes() =>
[
['page/:num', pageNum, 'page']
];
//
pageNum(num) {
var el = document.query('body');
el.innerHTML = _pageNumTemplate(num);
}
}
Start the router by creating an instance of the routing class and by
telling HipsterHistory
to start listening for pushState events:
HipsterRouter app = new MyRouter();
HipsterHistory.startHistory();
HipsterRouter() { on = new RouterEvents(); this._initializeRoutes(); }
Properties
RouterEvents on #
The router exposes named events on which listeners can wait. For example, if the router has a "page" route, the event will be available on the 'route:page' event:
HipsterRouter app = new MyRouter();
app.
on['route:page'].
add((num) {
print("Routed to page: $num");
});
RouterEvents on;
final List routes #
As shown in the constructor example, each route must include three values:
- A string representation of the route, which can include placeholders (e.g. "page:num")
- The method to be invoked when the route is matched
- A string that names the event that is generated for on.
List get routes() => [];