Hipster MVChipster_routerHipsterRouter

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() => [];