如何将App.Router拆分成几个独立的块？

Question

我的App.Router变成了一个巨大的、难以管理的代码块

App.Router = Em.Router.extend({

    // 100500 pages of horrible COPY-PASTE

    gotoBlabla: Ember.Route.transitionTo('blabla'),
    blabla: Em.Route.extend({
        route '/blabla',
        connectOutlets: function (router, context) {
            router.get('applicationController').connectOutlet('blabla');
    ...
    })
    ...
    ...

有没有一种方法可以用不那么冗长的样式声明路由，而不需要复制-粘贴？如何将Router声明拆分成更小的独立部分？

Answer 1

是的，绝对是这样的。在我们的应用程序中，我们将每个顶级路由(术语使用松散)作为一个独立的类放在它自己的文件中。我们有一个名为“state”的目录，这些文件就在这个目录中。我发现这使得它更具可读性，更易于测试。

例如：

// file: states/blog_posts.js

App.BlogPostsState = Ember.Route.extend({
   route: '/posts',
   /* .... */
});

// file: states/search_results.js

App.SearchResultsState = Ember.Route.extend({
   route: '/search',
   /* .... */
});

// file: states/router.js

App.Router = Em.Router.extend({
   blogPosts: App.BlogPostsState.extend(),
   searchResults: App.SearchResultsState.extend(),
   /* .... */
});

我不清楚哪些代码被一遍又一遍地复制粘贴。通常，如果我发现发生这种情况，我会尝试将代码隔离到一个混合中，但这并不总是很容易，特别是在路由器/状态图中。

有一件事可能是相关的，我不确定你是否知道，但事件将在状态层次结构中向上传播，因此每个叶状态不必重新实现相同的事件处理。

在此示例中，名为"showAlpha“的”操作“或”事件处理程序“在所有三个状态/路由位置(阿尔法、贝塔、德尔塔)都有效。这样就不需要多次重新实现相同的东西。

App.Router = Ember.Router.extend({
    showAlpha: Ember.State.transitionTo('alpha'),

    alpha: Em.Route.extend({
        route: '/alpha'
    }),
    beta: EM.Route.extend({
        route: '/beta'
    }),
    delta: Ember.Route.extend({
        route: '/delta'
    })
});

我希望这能有所帮助。我不确定这是否涵盖了你一遍又一遍复制粘贴的代码。