2017-01-10 5 views
3

Ember 2 앱의 페이지 매김 구성 요소를 만들려고합니다. 일반적인 용도의 페이지 매기기 구성 요소이므로 많은 다른 경로에서 사용하고 싶었습니다. 그 때문에 어떻게 든 (내 마음 속에서) 작업 할 페이지 링크에 대한 내 경로 이름을 제공해야합니다.Ember 2 - 구성 요소를 통한 경로 전환

경로 이름 (문자열)을 구성 요소에 쉽게 전달할 수 있습니다 : {{pagination-component myRoute='myCurrentRouteName'}}. 그리고 구성 요소의 내부 는 : {{link-to myRoute (query-params page=1)}}이 페이지에 가기 위해 잘 작동

좋아 : < < 첫째, 이전 <, 다음> 마지막 >>.

하지만 모든 페이지를 가리키는 선택 상자가있어서 사용자가 페이지를 선택하면 queryParams와 비슷한 경로로 전환 할 수 있습니다 : myRoute?page=selectedPage. 엠버 (ember)에 대한 모든 자습서에서는 구성 요소 내에서의 전환이 '아니오'라고 말합니다.

하지만 페이지 매김을 제네릭으로 만들고 페이지 매김을 처리하고 동일한 정확한 전환을 제공하는 모든 단일 경로 내에 작업을 원하지 않는다면 어떻게해야합니까?

지금까지 구성 요소 내에서 전환 할 수있는 구성 요소에 '-routing'을 삽입 할 수 있다는 것을 알았지 만 어떤 이유로 든 작동하지 않습니다. 게다가 사람들은 개인적이고 신뢰할 수 없다고 말합니다. 또한 액션으로 Route Mixin을 만들려고 했으므로 selectedPage과 함께 구성 요소의 sendAction을 간단하게 만들 수 있지만 내 믹스 내에서 라우터를 가져 오는 방법을 모르겠다 (router.transitionTo).

답변

3

전환을위한 공개 API를 사용해야합니다. 이는 경로 transitionTo 및 컨트롤러 transitionToRoute에 제공됩니다. 이 방법이 권장됩니다. 당신이 말했듯이

  1. , 당신은 Ember.getOwner(this).lookup('router:main').transitionTo('myRouteName')를 사용하여 구성 요소에서 작동 할 수 있지만 그 좋은 디자인에 대해 강력하게 입니다.
  2. 당신은 Application 경로의 actions 해시 내부 myTransitionToUrl라는 이름의 메소드를 정의하고 구성 요소에서 경로 액션 메소드 myTransitionToUrl를 호출 ember-route-action-helper 부가 기능을 설치할 수 있습니다.
  3. 응용 프로그램 경로에서 메서드를 정의하지 않으려면 mixin에 정의하고 필요한 경로에서 구현할 수 있습니다. 그것은 또한 작동합니다.
  4. 내 선택과 권장 접근는 말 pagination-componentprev, next, transtionTo 행동, 그때 Mixin에서 모든 작업을 구현하고 pagination-component을 사용하는 모든 경로에서 확장합니다을 가지고있을 것이다. 구성 요소의 작업을 통해 라우팅 할 데이터 변경 내용을 알려줍니다. 그것도 Data Down Actions Up 전략을 보장합니다.
+0

고맙습니다! 내가 올바른 길을 가고있는 것 같아. 그것이 내가 시도한 마지막 것입니다 (** # Mixin ** 사용). 그러나 앞서 언급했듯이 내 경로에서 Mixin을 확장하고 ** prev **, ** next **와 같은 작업을 정의 할 수 있습니다. 질문은 _ Mixin 내부에서 라우터 **를 참조하려면 어떻게해야합니까? _ ** 이전 ** **/** 다음 ** 작업 내에서 'router.transitionTo'를 호출해야하는 것 같습니다. – GogromaT

+0

아니, 그냥 '이거 할 수있어.transitionTo'는'this'가 경로 인스턴스 – kumkanillam

+0

o를 참조하기 때문에 동작 내부에 있습니다. 그러나 # 4를 시도하고 있는데 문제가 발생했습니다. 컴포넌트가 분리되어 있기 때문에 컴포넌트에서 this.sendAction을 호출 할 때 어떤 액션도 발생하지 않습니다. 나는 그 구성 요소를 사용하고자하는 모든 곳에서'{{pagination-component prev = (route-action 'prev') next = (route-action 'next') ...}}'라고 말해야합니다. 이러한 동작이 어떻게 든 자동으로 참조되는 방법이 있습니까? 믹스 (Mixin) 경로는 이러한 모든 작업 (이전, 다음 등)에 대해 동일한 이름을 갖기 때문에. – GogromaT