Comment diviser App.Router en plusieurs blocs indépendants?

Question

Mon App.Router se transforme en un énorme bloc unique ingérable code

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

Est-il possible de déclarer le routage dans un style moins bavard et sans copier-coller? Comment diviser une déclaration de routeur en parties indépendantes plus petites?

Answer 1

Oui, il y en a absolument. Dans notre application, nous faisons chaque classe de niveau supérieur (terme utilisé vaguement) une classe distincte dans son propre fichier. Nous avons un répertoire appelé "states" où résident ces fichiers. J'ai trouvé cela le rend plus lisible et plus facile à tester.

Par exemple:

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

---

Je suis pas clair sur ce code est une copie-collé, encore et encore. Typiquement, si je trouve cela qui se passe, j'essaie d'isoler ce code dans un mixin, mais ce n'est pas toujours facile, surtout dans un routeur/statechart. Une chose qui pourrait être relavent, je ne sais pas si vous êtes au courant ou pas, mais les événements voyageront dans la hiérarchie d'état, donc chaque état de feuille ne doit pas nécessairement réimplémenter la même gestion d'événement.

Dans cet exemple, "action" ou "gestionnaire d'événements" appelé "showAlpha" est valide dans les trois états/emplacements de route (alpha, bêta, delta). Cela élimine le besoin de réimplémenter la même chose plusieurs fois.

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

J'espère que cela aide. Je ne suis pas sûr si cela couvre le code que vous copiez-coller encore et encore.