EmberJS에서 application.hbs 이외의 템플릿을 렌더링하는 방법은 무엇입니까?

Question

EmberJS에서 기본 템플릿 파일은 application.hbs입니다. 경로에서 렌더링 된 모든 템플릿은이 기본 템플릿 파일의 {{outlet}}으로 이동합니다.

이제 템플릿 템플릿이 application.hbs와 매우 다른 또 다른 기본 템플릿 파일 인 print.hbs이 있습니다. 어떻게해야합니까? 라우터 파일에서

, 나는이 :

App.Router.map(function() { 

    this.resource('print', function() { 
     this.route('display1'); 
     this.route('display2'); 
    }); 

    this.route('dashboard', {path: '/'}); 
    this.route('anything'); 
}); 

라우트는 dashboard 및 anything가 application.hbs 사용합니다. print 경로에서 print.hbs을 사용하려면 어떻게해야합니까? 도와주세요.

Answer 1

응용 프로그램 템플릿을 쉽게 변경할 수 없습니다. Ember는 templateName 속성 변경 내용을 수신하지 않고 직접 템플릿을 다시 렌더링하려고하면 제대로 응답하지 않습니다.

좋은 방법은 '화면'또는 '인쇄'모드 중 어느 것을 사용하는지에 따라 애플리케이션 템플릿 내에서 다른 부분을 사용하는 것입니다. 이 불행히도 중 하나가 작동하지 않는 이유

App.ApplicationController = Ember.Controller.extend({ 
    isPrint: false, 
    currentPathChange: function() { 
    var currentPath = this.get("currentPath"); 
    var isPrint = currentPath ? currentPath.indexOf("print") === 0 : false; 
    this.set("isPrint", isPrint); 
    }.observes('currentPath').on("init") 
}); 

This JSBin

<script type="text/x-handlebars"> 
    {{#if isPrint}} 
     {{partial "application-print"}} 
    {{else}} 
     {{partial "application-normal"}} 
    {{/if}} 
    </script> 

    <script type="text/x-handlebars" data-template-name="application-normal"> 
    <div id="app-normal"> 
     <h2>Normal template</h2> 

     {{outlet}} 
    </div> 
    </script> 

    <script type="text/x-handlebars" data-template-name="application-print"> 
    <div id="app-print"> 
     <h2>Print template</h2> 

     {{outlet}} 
    </div> 
    </script> 

을 시연 할 예정이다. this bug report에 따르면 동일한 페이지에 outlet 지시문이 여러 개인 경우 (다른 #if 범위에 있더라도) Ember의 핸들 막대가 혼동스러워집니다.

이 문제가 해결 될 때까지 다음과 같이 약간 수정 된 솔루션을 제안합니다.

응용 프로그램 템플릿이 비어 있습니다. 일반 및 인쇄 섹션 각각에 대해 하나의 템플릿.

<script type="text/x-handlebars"> 
    {{outlet}} 
    </script> 

    <script type="text/x-handlebars" data-template-name="normal"> 
    <div id="app-normal"> 
     <h2>Normal template</h2> 

     {{outlet}} 
    </div> 
    </script> 

    <script type="text/x-handlebars" data-template-name="print"> 
    <div id="app-print"> 
     <h2>Print template</h2> 

     {{outlet}} 
    </div> 
    </script> 

라우터에서 모든 것이 정상적으로 처리되고 인쇄 리소스가됩니다. 일반 자원은 /에 있으므로 링크는 모두 동일하게 유지됩니다. ApplicationController에서 특별한 코딩이 필요 없습니다.

App.Router.map(function() { 
    this.resource("print", function() { 
    this.route("a"); 
    this.route("b"); 
    }); 

    this.resource("normal", {path: "/"}, function() { 
    this.route("a"); 
    this.route("b"); 
    }); 
}); 

근무중인 jsbin here.