2012-07-08 3 views
6

엠버 라우터로 최근에 알아 차 렸던 점은 잎 루트를 탐색 할 수 있다는 것입니다.Ember Router가 잎 루트로 탐색 만 허용하는 이유는 무엇입니까?

지금 내가 잘못한 일을하지 않으면 버그/디자인 실수로 보인다. 이와 나는 3 열 레이아웃과 표준 데스크톱 이메일 클라이언트와 같은 (뭔가를 UI를 구축하고자,

내가 프로젝트의 컬렉션을 가지고, 각각의 프로젝트가 많은 협력자 :

의이 같은 예를 들어 뭔가를 보자) 왼쪽에서 프로젝트 목록이있는 곳에서 가운데 ​​열에는 공동 작업자 목록이 표시되고 공동 작업자를 클릭하면 세부 정보가 오른쪽 열에로드됩니다.

이제 라우팅을 사용하여 프로젝트를 클릭 할 때 /projects/1으로 이동하고 공동 작업자를 클릭하면 /projects/1/collaborators/23으로 이동합니다. 여기

는 중첩 된 경로의 첫 부분을 설명하는 라우터 :

App.reopen(
    Router: Ember.Router.extend(
    enableLogging: true 
    location: 'hash' 

    root: Ember.Route.extend(
     index: Ember.Route.extend(
     route: '/' 

     redirectsTo: 'projects' 
    ) 

     projects: Ember.Route.extend(
     # This route is not routable because it is not a leaf route. 
     route: '/projects' 

     connectOutlets: (router) -> 
      # List projects in left column 
      router.get('applicationController').connectOutlet('projects', App.projects) 

     show: Ember.Route.extend(
      # This route is routable because it is a leaf route. 
      route: '/:project_id' 

      connectOutlets: (router, project) -> 
      # Render the project into the second column, which actually renders 
      # a list of collaborators. 
      router.get('projectsController').connectOutlet('project', project) 
     ) 
    ) 
    ) 
) 
) 

당신은 엠버가 updateRoute 때문에이 라인의 root.projects.show로 전환 될 때까지 (URL을 설정)를 호출하지 않습니다 보 겠지만 https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/routable.js#L81

다른 사람이 이와 같은 작업을 한 적이 있습니까? 이것을 설계하는 더 좋은 방법이 있습니까?

답변

7

가장 좋은 방법은 root.projects.index 상태를 "/"경로와 함께 사용하는 것입니다. 이렇게하면 모든 페이지마다 고유 한 상태가됩니다.

projects: Ember.Route.extend(
    # This route is not routable because it is not a leaf route. 
    route: '/projects' 

    connectOutlets: (router) -> 
    # List projects in left column 
    router.get('applicationController').connectOutlet('projects', App.projects) 

    index: Ember.Route.extend(
    route: "/" 
) 

    show: Ember.Route.extend(
    # This route is routable because it is a leaf route. 
    route: '/:project_id' 

    connectOutlets: (router, project) -> 
     # Render the project into the second column, which actually renders 
     # a list of collaborators. 
     router.get('projectsController').connectOutlet('project', project) 
) 
) 

N.B. 즉, 3 열 레이아웃을 사용하여 비슷한 작업을 수행 중이며 중간 및 오른쪽 열을 위의 경로와 일치시키고 공유 레이아웃의 왼쪽 열을 가능한 중간보기 각각에 추가한다고합니다.

+0

고마워요. 브래들리, 그 트릭을하는 것 같습니다. – Ivan

+0

매우 똑똑합니다. 팁 고마워. – nembleton

+0

@BradleyPriest 이에 대해 [질문] (http://stackoverflow.com/questions/11377498/ember-js-crud-scenarios-specifying-view-from-within-a-route)이 있습니다. Ember를 사용하는 방법을 이해하는 것이 어렵다는 것을 알고 있습니다. CRUD 시나리오를 사용해보십시오. 좀 봐 주 시겠어요? – MilkyWayJoe

2

이 문제가 해결 된 것으로 생각합니다. 색인없이 엠버 루트를 사용 중이며 리프 상태 문제가 발생하지 않습니다. 나는 왜 색인이 필요한지 탐색하고 있었고 여기에 착륙했습니다. 인덱스 상태를 사용하는 다른 이유가 있습니까?

관련 문제