Ember.js 콘센트를 모달 창으로 렌더링

Question

모달 렌더링을 시도하고 있습니다. 이를 위해 {{outlet modalOutlet}}을 사용하여 사용자 지정 콘센트를 만들었습니다. 내 응용 프로그램 템플릿에는 2 개의 콘센트 인 기본 콘센트와 modalOutlet이 있습니다. 그러나 모달 템플릿을 {{outlet modalOutlet}}으로 렌더링하면 내 기본값 {{outlet}}이 비어있게됩니다. 기본값은 {{콘센트}} 변경되지 않도록

어떻게 그것을 변경합니까, 그래서 실제로 모달 창으로 {{outlet modalOutlet}} 렌더링하거나

내가 '레이아웃의 일환으로 사이드 바 등 이것이 내 코드 때문인지 확실하지 않거나, 내가 누락 된 renderTemplate() 메소드에 관한 것입니다. jsFiddle with my code is here.

// Router 
App.Router.map(function(){ 
    this.route('contributors'); 
    this.route('contributor', {path: '/contributors/:contributor_id'}); 
}); 


App.ContributorsRoute = Ember.Route.extend({ 
    model: function() { 
     return App.Contributor.all(); 
    }, 
}); 

App.ContributorRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
     this.render('contributor', { 
      outlet: 'modalOutlet' 
     }); 
    } 
}); 

<script type="text/x-handlebars" data-template-name="application"> 
    <nav> 
     {{#linkTo "index"}}Home{{/linkTo}} 
     {{#linkTo "contributors"}}Contributors{{/linkTo}} 
    </nav> 
    <div style='padding:5px;margin:5px;border:1px dotted red;'> 
     Default Outlet 
     {{outlet}} 
    </div> 
    <div style='padding:5px;margin:5px;border:1px dotted blue;'>  
     modalOutlet 
     {{outlet modalOutlet}} 
    </div> 
</script> 

Answer 1

당신은뿐만 아니라, contributors 템플릿을 렌더링해야합니다.

App.ContributorRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
     this.render('contributors'); 
     this.render('contributor', { 
      outlet: 'modalOutlet' 
     }); 
    } 
}); 

당신은, 그러나,이 같은 중첩 경우 경로 이러한 문제를 방지 할 수 있습니다

App.Router.map(function(){ 
    this.resource('contributors', function() { 
     this.route('show', {path: ':contributor_id'}); 
    }); 
}); 

을 ... 그리고 새로운 구조를 일치하도록 응용 프로그램의 나머지 부분을 조정합니다. 이 경우 modalOutlet가 into 옵션으로 자리 잡고 장소를 지정해야합니다 (이 경우 : 'application') 일

Answer 2

문제는 라우팅 구조가 중첩되어 있지 않으며 경로를 중첩하면 모달 아울렛이 포함 된 경로를 지정해야합니다.

어떤 일이 일어나고하면

응용 프로그램을 렌더링 -> 참여자

목록을 보여,하지만 당신은 링크를 클릭 할 때 당신은 지금

응용 프로그램을 렌더링하는 -> 기여자

d Contributor 템플릿이 제거되었습니다.

이 같은 중첩하여 경로 경우

응용 프로그램 -> 참여자 -> 기여자

그런 다음 당신은 여전히 ​​목록을 보여주는 Contributors 템플릿을해야합니다. 당신이 형제 경로로 전환 할 때 기본 콘센트가 삭제됩니다 이후

updated JSFiddle

//Router 
App.Router.map(function(){ 
    this.resource('contributors', function() { 
     this.resource('contributor', {path: '/:contributor_id'}); 
    }); 
}); 

//Route 
App.ContributorRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
     this.render('contributor', { 
      into: 'application', 
      outlet: 'modalOutlet' 
     }); 
    } 
});