如何在EmberJS中渲染application.hbs以外的模板？

Question

在EmberJS中，主要的模板文件是application.hbs。從路線中呈現的任何模板都是該主模板文件的{{outlet}}。

現在，我有另一個主要模板文件，說print.hbs其中模板設計是從application.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屬性更改，並且在您嘗試自己重新渲染模板時反應不佳。

這樣做的一個好方法是根據您是處於「屏幕」還是「打印」模式，在應用程序模板中使用不同的部分。

<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> 

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將展示爲什麼這很不幸，也不管用。根據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"); 
    }); 
}); 

Working jsbin here。