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

의 거대한 불가능한 단일 블록으로 변하기? 라우터 선언을 더 작은 독립적 인 부분으로 나누는 방법은 무엇입니까?

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

---

나는 또 다시 복사 - 붙여 넣기 및되고있는 코드에 대해 불분명 해요. 일반적으로 그런 일이 발생하면 해당 코드를 믹스 인으로 분리하려고 시도하지만 라우터 나 상태 차트에서 항상 쉬운 것은 아닙니다.

당신이 알고 있는지 여부는 확실하지 않지만 이벤트가 주인장 수준으로 올라와 각 리프 상태가 반드시 동일한 이벤트 처리를 다시 구현할 필요는 없습니다.

이 예제에서 "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' 
    }) 
}); 

나는 희망한다. 그 코드가 복사하여 반복해서 붙여 넣는 코드인지 여부는 확실하지 않습니다.