在 Ember.js 中获取路由列表

Question

在我的主页 (index.hbs) 上，我需要显示与给定条件匹配的每个路由的链接列表（例如，具有特定属性）。所以我需要的是这样的：

// 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()

问题是如何获得routes。我发现我可以通过以下方式获取路线名称列表：

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

但我不知道如何将它们翻译成Route 对象。大概Router 有这样做的信息，但 AFAICS 它没有公开。有什么建议么？

Answer 1

如何使用容器和查找？

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

我知道您访问的是私有的__container__。但通常你不应该访问所有路由。

Answer 2

这是一种方法，尽管我认为这有点可怕，甚至可能长期危险，因为它使用的是 Javascript 的功能而不是 Ember API。我们首先通过您的“App”对象获取路线。您可以使用 Object.keys(App) 获取它包含的所有类的列表。然后你可以遍历每一个，检查它是否是一个带有 .superclass 的路由，如果它是一个路由，它将是 Ember.Route。然后，您可以检查每个原型上的 showOnIndex 属性。

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]);    
    }
});

我们现在有了一个包含所有 showOnIndex 为 true 的路由类名的数组。

但是，您仍然存在将识别器中的名称与 Route 的类名称对齐的问题，但是由于 Ember 的方式是，像 my/url 这样的路由将映射到 MyUrlIndexRoute 和 'my.url.index' 等然后您可以将 Route 按大写拆分，删除最后一部分（'Route'），将它们连接在一起并将其全部转换为小写。

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);
});

然后您可以在模板中循环遍历 routesByName 并为每个路由创建一个{{#link-to}}。

我认为实现您想要的更好的方法可能是在您的应用程序中单独保留所有路线的地图到其 showOnIndex 值，并为您要添加的每个新路线更新它。从长远来看，这可能会更安全，因为谁知道 Ember 内部结构在未来会发生怎样的变化，这可能会阻止上述一些事情的发生。

请注意，我在 Chrome 中的 Ember 应用程序中以调试器模式检查了所有这些，但没有直接运行所有代码片段，因此对任何错误表示歉意。