Ember 라우터 v2를 사용하여 모달 상태를 시작하고 종료하는 올바른 방법은 무엇입니까?

Question

새로운 Ember 라우터로 모달 상태/뷰를 처리하는 올바른 방법을 알 수 없습니다. 보다 일반적으로 "주"상태 (URL)에 영향을 미치지 않고 입력 및 종료 할 수있는 상태를 어떻게 처리합니까?

예를 들어 인 "새 메시지"버튼은 현재 리프 상태에 관계없이 항상입니다. "새 메시지"를 클릭하면 URL에 영향을주지 않고 현재보기에서 새 메시지 모달이 열립니다.

현재,이 같은 접근 방식을 사용하고 있습니다 :

경로 :

App.Router.map(function() { 
    this.route('inbox'); 
    this.route('archive'); 
}); 

App.IndexRoute = Em.Route.extend({ 
    ... 
    events: { 
    newMessage: function() { 
     this.render('new_message', { into: 'application', outlet: 'modalView' }); 
    }, 

    // Clicking 'Save' or 'Cancel' in the new message modal triggers this event to remove the view: 
    hideModal: function() { 
     // BAD - using private API 
     this.router._lookupActiveView('application').disconnectOutlet('modalView'); 
    } 
    } 
}); 

App.InboxRoute = Em.Route.extend({ 
    ... 
    renderTemplate: function(controller, model) { 
    // BAD - need to specify the application template, instead of using default implementation 
    this.render('inbox', { into: 'application' }); 
    } 
}); 

App.ArchiveRoute = ... // basically the same as InboxRoute 

application.handlebars : 나는 분명히 짧음에 대한 몇 가지 코드를 남겨 두었다

<button {{action newMessage}}>New Message</button> 
{{outlet}} 
{{outlet modalView}} 

합니다.

이 방법은 '작동'하지만 위에서 확인 된 두 가지 문제가 있습니다 나는 hideModal 이벤트 처리기에서 모달 뷰를 제거하기 위해 전용 API를 사용하고

1. 합니다.
2. renderTemplate의 기본 구현은 모달을 열고 닫으면 응용 프로그램에 표시되는 대신 모달의 템플리트로 렌더링하려고 시도하기 때문에 모든 서브 루틴에서 application 템플리트를 지정해야합니다. 모달의 템플릿이 IndexRoute에 대해 lastRenderedTemplate이 되었기 때문에받은 편지함 상태와 보관 상태 사이를 탐색합니다.

분명히이 두 가지 문제는 거래가 아니지만 더 나은 방법이 있는지, 아니면 현재 라우터 API의 틈이 있는지를 아는 것이 좋습니다.

Answer 1

우리는 사적인 API에 액세스하지 않고 같은 일을합니다. 우리의 솔루션이 최선의 방법인지는 모르지만 작동합니다.

RootRoute의 이벤트에서 나는 우리가 렌더링해야하는 뷰를 생성하고 추가하는 이벤트 (귀하의 newMessage과 동일)를 가지고 있습니다.

events: { 
    showNewSomething: function(){ 
     var newSomethingView = app.NewSomethingView.create({ 
      controller: this.controllerFor('newSomething') 
     }); 
     newSomethingView.append(); 
    } 
} 

이것은 우리의 응용 프로그램에 모달보기를 추가합니다. newSomethingView에서 취소 또는 저장하려면 this.remove()으로 전화하여보기를 삭제하고 앱에서 다시 제거하십시오.

다시 말하지만, 이것은 모범 사례처럼 느껴지지 않지만 작동합니다. 누군가에게 더 나은 해결책이 있다면이 점에 대해 자유롭게 의견을 말하십시오.

Answer 2

부트 스트랩 모달 스크립트를 사용하고 있는지, 아니면 어떤 버전인지 모르는 경우이 질문에 제안 된 해결 방법이 있습니다. 아직 모든 조각을 알아 내지 못했지만 Colorbox을 "Ember best practice"- 호환 방식으로 사용할 수있는 유사한 유형의 솔루션을 직접 찾고 있습니다.