5 is: 'more-route-selection',
8 MoreRouting.ContextAware,
14 * Routes to select from, as either a path expression or route name.
16 * You can either specify routes via this attribute, or as child nodes
17 * to this element, but not both.
19 * @type {String|Array<string|MoreRouting.Route>}
23 observer: '_routesChanged',
27 * The selected `MoreRouting.Route` object, or `null`.
29 * @type {MoreRouting.Route}
39 * The index of the selected route (relative to `routes`). -1 when there
50 * The _full_ path expression of the selected route, or `null`.
59 * The params of the selected route, or an empty object if no route.
70 * @event more-route-change fires when a new route is selected.
72 * newRoute: MoreRouting.Route, oldRoute: MoreRouting.Route,
73 * newIndex: number, oldIndex: number,
74 * newPath: ?string, oldPath: ?string,
75 * newParams: Object, oldParams: Object,
79 routingReady: function() {
80 this._routesChanged();
83 _routesChanged: function() {
84 if (!this.routingIsReady) return;
85 var routes = this.routes || [];
86 if (typeof routes === 'string') {
87 routes = routes.split(/\s+/);
89 this._routeInfo = this._sortIndexes(routes.map(function(route, index) {
91 model: MoreRouting.getRoute(route, this.parentRoute),
96 this._observeRoutes();
101 * Tracks changes to the routes.
103 _observeRoutes: function() {
104 if (this._routeListeners) {
105 for (var i = 0, listener; listener = this._routeListeners[i]; i++) {
110 this._routeListeners = this._routeInfo.map(function(routeInfo) {
111 return routeInfo.model.__subscribe(this._evaluate.bind(this));
115 _evaluate: function() {
118 var oldIndex = this.selectedIndex;
120 for (var i = 0, routeInfo; routeInfo = this._routeInfo[i]; i++) {
121 if (routeInfo.model && routeInfo.model.active) {
122 newIndex = routeInfo.index;
123 newRoute = routeInfo.model;
127 if (newIndex === oldIndex) return;
129 var oldRoute = this.selectedRoute;
130 var oldPath = this.selectedPath;
131 var oldParams = this.selectedParams;
133 var newPath = newRoute ? newRoute.fullPath : null;
134 var newParams = newRoute ? newRoute.params : {};
136 this._setSelectedRoute(newRoute);
137 this._setSelectedIndex(newIndex);
138 this._setSelectedPath(newPath);
139 this._setSelectedParams(newParams);
141 this.fire('more-route-change', {
142 newRoute: newRoute, oldRoute: oldRoute,
143 newIndex: newIndex, oldIndex: oldIndex,
144 newPath: newPath, oldPath: oldPath,
145 newParams: newParams, oldParams: oldParams,
149 * We want the most specific routes to match first, so we must create a
150 * mapping of indexes within `routes` that map
152 _sortIndexes: function(routeInfo) {
153 return routeInfo.sort(function(a, b) {
156 } else if (!b.model) {
158 // Routes with more path parts are most definitely more specific.
159 } else if (a.model.depth < b.model.depth) {
161 } if (a.model.depth > b.model.depth) {
165 // Also, routes with fewer params are more specific. For example
166 // `/users/foo` is more specific than `/users/:id`.
167 if (a.model.numParams < b.model.numParams) {
169 } else if (a.model.numParams > b.model.numParams) {
172 // Equally specific; we fall back to the default (and hopefully
173 // stable) sort order.