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

有没有办法以较简洁的方式声明路由并且没有复制粘贴？如何将路由器声明拆分为较小的独立部分？

Answer 1

是的，绝对是。在我们的应用程序中，我们将每个顶级路由（松散地使用的术语）放在它自己的文件中。我们有一个名为“states”的目录，其中包含这些文件。我发现这使它更易读，更容易测试。

例如：

// 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(),
   /* .... */
});

我不清楚一遍又一遍地复制粘贴的代码。通常，如果我发现这种情况发生，我会尝试将该代码隔离到mixin中，但这并不总是很容易，尤其是在路由器/状态图中。

有一件事可能是相关的，我不确定你是否意识到，但是事件会在状态hiercharchy上移动，所以每个叶子状态不一定要重新实现相同的事件处理。

在此示例中，名为“showAlpha”的“action”或“event handler”在所有三个州/路线位置（alpha，beta，delta）中都有效。这消除了多次重新实现同样的事情的需要。

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

我希望有所帮助。我不确定这是否涵盖了您反复粘贴的代码。

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

1 个答案: