경로/로그인 상태에 따라 메뉴 바가 달라집니다.

Question

내 엠버 앱에는 메인 네비게이션과 서브 네비게이션이 필요합니다. 경로에 따라 메뉴를 표시하지 않고 mainnav 또는 mainnav + subnav를 표시합니다. 그래서 내가 그것을 처리하는 생각 된 방법은 두 application.hbs

{{outlet header}} 
{{outlet}} 

에서 콘센트와 동적 subnav을 처리 할 수있는 mainnav.hbs 다른 콘센트입니다.

각 경로마다 renderTemplate 함수를 정의합니다. 그것은 잘 작동하지만 꽤 지루합니다. 왜냐하면 새로운 경로를 만들 때마다 코드를 복사해야하기 때문입니다. 예. 인덱스 경로처럼 보이는 방법 :

this.render('index'); 
this.render('layouts/_mainnav', { 
    outlet:'header' 
}); 

그리고 여전히 복사 한 모든 경로에 대해 수행되어야하며 또한 최적화 할 수있는 것 같다됩니다 너무 많은 코드는 아니지만. 어쨌든 코드를 복사하거나 완전히 다른 방식으로 수행 할 수 있습니까?

Answer 1

응용 프로그램에서 사용자의 세션/경로와 관련된 상태를 유지하려는 경우 application 템플릿 내에서이를 사용하여 조건부 렌더링을 수행 할 수 있습니다. 개별 템플릿은 {{partial}} 도우미로 정리하여 계속 구분할 수 있습니다. 헤더 부분에 의해 제공 될 것이다 예컨대

여기서

<script type='text/x-handlebars' data-template-name='_header'> 
    {{partial 'mainmenu'}} 
    {{#if App.loggedIn}} 
    {{partial 'submenu'}} 
    {{/if}} 
</script> 

<script type='text/x-handlebars' data-template-name='_mainmenu'> 
    <div class="btn-group"> 
    <button class="btn" {{action 'login'}}>Login</button> 
    <button class="btn" {{action 'logout'}}>Logout</button> 
    </div> 
</script> 

<script type='text/x-handlebars' data-template-name='_submenu'> 
    <div class="btn-group"> 
    <button class="btn">Profile</button> 
    <button class="btn">Settings</button> 
    </div> 
</script> 

전체 jsbin 예.

이것은 인터페이스 디자인의 복잡성을 기반으로해야 할 수도 있습니다. renderTemplate은 유연성이 뛰어나고 애플리케이션 템플릿의 {{partials}}은 템플릿의 일부 로직을 희생하면서 코드 중복을 줄입니다.