Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can use <code>{{render}}</code> inside an <code>if</code> helper to show different layouts. </p> <p>For instance if you have an <code>ApplicationController</code> that has <code>login</code> and <code>logout</code> action handlers, and a corresponding `loggedIn' property.</p> <pre><code>App.ApplicationController = Ember.Controller.extend({ loggedIn: false, login: function() { this.set('loggedIn', true); }, logout: function() { this.set('loggedIn', false); } }); </code></pre> <p>The you can bind to the <code>loggedIn</code> property inside the application template like so.</p> <pre><code>&lt;script type='text/x-handlebars' data-template-name='application'&gt; &lt;button {{action login }}&gt;Login&lt;/button&gt; &lt;button {{action logout }}&gt;Logout&lt;/button&gt; {{#if loggedIn}} {{render 'user'}} {{else}} {{render 'guest'}} {{/if}} &lt;/script&gt; </code></pre> <p>Where <code>user</code> and <code>guest</code> are corresponding templates.</p> <pre><code>&lt;script type='text/x-handlebars' data-template-name='user'&gt; &lt;h1&gt;User layout&lt;/h1&gt; &lt;div class='box user'&gt; {{outlet}} &lt;/div&gt; &lt;/script&gt; &lt;script type='text/x-handlebars' data-template-name='guest'&gt; &lt;h1&gt;Guest layout&lt;/h1&gt; &lt;div class='box guest'&gt; {{outlet}} &lt;/div&gt; &lt;/script&gt; </code></pre> <p>Here's a working <a href="http://jsbin.com/itolih/2/" rel="noreferrer">jsbin</a>.</p> <p>Edit: To not use the application route based on some static criteria or loaded via <code>model</code> hooks, you can override the <code>renderTemplate</code> method of the <code>ApplicationRoute</code>.</p> <pre><code>App.ApplicationRoute = Ember.Route.extend({ renderTemplate: function() { var loggedIn = false; if (loggedIn) { this.render('user'); } else { this.render('guest'); } } }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload