Getting a list of routes in Ember.js

问题

On my main page (index.hbs), I need to display a list of links to each route which matches a given criteria, (e.g. has a certain attribute). So what I need is something like this:

// Define a route with some attribute
App.FirstRoute = Ember.Route.extend({
    showOnIndex: true
});

// Get a list of visible routes in the IndexController
visibleRoutes: function() {
    var routes = /* How to do this */
    return routes.filter(function(route) {
        route.get('showOnIndex'));
    });
}.property()

The problem is how to get routes. I have found that I can get a list of route names by:

var router = this.get('target');
var names = router.router.recognizer.names;

But I can't find out how to translate them into Route objects. Presumably the Router has the information to do so, but AFAICS it is not publically exposed. Any suggestions?

回答1:

what about using the container and lookups?

Ember.keys(App.Router.router.recognizer.names).map(function(name) {
  return App.__container__.lookup('route:' + name);
}).compact();

I know you access the __container__ which is private. But normally you shouldn't access all the routes anyway.

回答2:

Here is one way to do it although I think it is a little bit horrible and maybe even dangerous long term since it is using features of Javascript rather than the Ember API. We start by getting the routes through your 'App' object. You can get a list of all the classes it contains using Object.keys(App). Then you can go through each of these, check if it is a route with .superclass which will be Ember.Route if it is a Route. You can then check the showOnIndex property on the prototype of each of these.

var allRoutes = [];
Object.keys(App).forEach(function(key, index, allKeys) {
    if (App[key].superclass === Ember.Route && App[key].prototype.showOnIndex === true) {
        allRoutes.push(App[key]);    
    }
});

We now have an array of all the class names of the routes which have showOnIndex of true.

However, you still have the problem of aligning the names from the recognizer with the class names of the Route but since the Ember way is that a route like my/url will map to MyUrlIndexRoute and 'my.url.index' etc then you can split the Route by upper case, remove the last part ('Route'), join them together and convert it all to lower case.

var routesByName = [];
allRoutes.forEach(function(name, index, all) {
    var names = name.match(/[A-Z][a-z]+/g);
    names.pop();
    var routeName = names.join('.').toLowerCase();
    routesByName.push(routeName);
});

Then you can just loop through the routesByName in the template and create a {{#link-to}} for each of them.

I think a better way to achieve what you want may be to keep a map of all the routes to their showOnIndex value separately inside your app and just update it for each new one you want to add. It may be better safer long term since who knows how the Ember internals will change in the future which could prevent doing some of the things above.

Note that I checked all this in debugger mode in an Ember app in chrome but haven't run all the code fragments directly so apologies for any mistakes.

来源：https://stackoverflow.com/questions/28274005/getting-a-list-of-routes-in-ember-js

标签

javascript

ember.js