Come rendere il modello diverso da application.hbs in EmberJS?

Question

In EmberJS, il file di modello principale è application.hbs. Qualsiasi modello reso dai percorsi va a {{outlet}} di questo file di modello principale.

Ora, ho un altro file di modello principale, ad esempio print.hbs in cui il modello di progettazione è molto diverso da application.hbs. Come faccio a fare questo?

Nel file router, ho:

App.Router.map(function() { 

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

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

I percorsi dashboard e anything utilizza il application.hbs. Cosa devo fare per utilizzare print.hbs sul percorso print? Per favore aiuto.

Answer 1

Non è possibile modificare facilmente il modello di applicazione. Ember non ascolta le modifiche alla proprietà templateName e risponde male quando si tenta di eseguire nuovamente il rendering del modello.

Un buon modo per eseguire questa operazione consiste nell'utilizzare diversi partial all'interno del modello di applicazione, in base al fatto che ci si trovi nella modalità "schermo" o "stampa".

<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 sarà dimostrare perché questo, purtroppo, non funziona neanche. Secondo this bug report, il manubrio di Ember viene confuso quando vi sono più direttive outlet nella stessa pagina, anche se si trovano in ambiti diversi #if.

Fino a quando non viene risolto, propongo la seguente soluzione, leggermente modificata.

Il modello di applicazione è vuoto. Un modello ciascuno per la sezione normale e di stampa.

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

Nel router, tutto è normale e le risorse di stampa. Le risorse normali sono collocate in /, in modo che tutti i link rimangano gli stessi. Non è necessaria la codifica speciale 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"); 
    }); 
}); 

Lavorare jsbin here.