2

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

有没有办法以不那么冗长的方式声明路由并且没有复制粘贴？如何将路由器声明拆分为更小的独立部分？

4

1 回答 1

3

是的，绝对有。在我们的应用程序中，我们将每个顶级路由（松散地使用的术语）在其自己的文件中作为一个单独的类。我们有一个名为“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 中，但这并不总是那么容易，尤其是在路由器/状态图中。

一件事可能是相关的，我不确定您是否知道，但事件将沿着状态层次结构传播，因此每个叶状态不一定要重新实现相同的事件处理。

在此示例中，名为“showAlpha”的“动作”或“事件处理程序”在所有三个状态/路由位置（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'
    })
});

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

于 2012-07-25T12:24:31.967 回答