Wie Vorlage anders als application.hbs in EmberJS rendern?

Question

In EmberJS ist die Hauptvorlagendatei die application.hbs. Jede Vorlage, die aus den Routen gerendert wird, geht an die {{outlet}} dieser Hauptvorlagendatei.

Jetzt habe ich eine andere Hauptvorlage Datei, sagen print.hbs, wobei das Template-Design ist sehr unterschiedlich von der application.hbs. Wie mache ich das?

In der Router-Datei, die ich habe:

App.Router.map(function() { 

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

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

Die Routen dashboard und anything die application.hbs verwendet. Was soll ich tun, um print.hbs auf der print Route zu verwenden? Bitte helfen Sie.

Answer 1

Sie können Anwendungsvorlage nicht einfach ändern. Ember hört nicht auf templateName Eigenschaft ändert sich und reagiert schlecht, wenn Sie versuchen, die Vorlage selbst zu rendern.

Eine gute Möglichkeit wäre, unterschiedliche Teiltöne innerhalb Ihrer Anwendungsvorlage zu verwenden, je nachdem, ob Sie sich im "Bildschirm" - oder "Druck" -Modus befinden.

<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 wird zeigen, warum dies leider auch nicht funktioniert. Nach this bug report, Embers Lenker wird verwirrt, wenn mehrere outlet Direktiven auf der gleichen Seite, auch wenn sie in verschiedenen #if Bereichen sind.

Bis dies behoben wird, schlage ich die folgende, leicht modifizierte Lösung vor.

Anwendungsvorlage ist leer. Jeweils eine Vorlage für Normal- und Druckbereich.

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

Im Router geht alles in Normal- und Druckressourcen. Normale Ressourcen werden an/platziert, so dass alle Links gleich bleiben. Keine Notwendigkeit für spezielle Codierung in 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"); 
    }); 
}); 

Arbeiten jsbin here.