Two {{outlet}} on application handlebar

1

Since I am working out login I have such kind of code using ember-simple-auth

    {{#if session.isAuthenticated}}
    <!-- Show editing controls intended for logged in user -->
    {{outlet}}
    {{else}}
    <!-- Show only the stuff normal users should see -->
    {{outlet}}
    {{/if}}

But it would trigger that two outlet will be rendered sometimes.

Possible I am addressing this issue https://github.com/simplabs/ember-simple-auth/issues/142

What is a better way to solve it? Or is it a known bug on ember? Thanks a lot.

2

Have you thought about overriding renderTemplate?

3

Yeah.

    {{#if session.isAuthenticated}}
    <!-- Show editing controls intended for logged in user -->
    {{outlet}}
    {{else}}
    <!-- Show only the stuff normal users should see -->
    {{outlet login}}
    {{/if}}

In the login route we need to add renderTemplate hook

App.LoginRoute = Ember.Route.extend
  renderTemplate: ->
     @render outlet: 'login'

Ember treat outlet not so friendly enough to me. I spend quite a couple of hours to figure out to solve it. It think two {{outlet}} on the same template is not working cool right now.

4

I believe rendering an outlet in a conditional is a known bug with ember that currently doesn’t work. I did a quick search of the issues on the ember repo and found this one Outlets inside conditionals don't re-render · Issue #3187 · emberjs/ember.js · GitHub which suggests that it will eventually be fixed by HTMLbars.

5

One possible solution might be to render a different component in your template depending upon the session state.

{{#if session.isAuthenticated}}
  {{edit-component}}
{{else}}
  {{normal-component}}
{{/if}}

Then again, if you’re trying to block access to a page and send the user to the log in page you might be better off using the beforeModel hook in the route file and performing a transition to the log in page.

6

Sorry I wasn’t clear (was in hurry when I typed that). But couldn’t you have one outlet and move the conditional logic inside of the renderTemplate hook. Example: Ember Latest - JSFiddle - Code Playground

7

Thanks for you reply and the code , it looks nice. @jasonmit

Just my first instinct that the if else condition inside outlet is not working correct and feel frustrated. I am new on Ember so hard to figure out using renderTemplate hook and views.

In the Ember Tutorial, it seems that we should avoid using component instead of views.

8

What object holds state of your session object? Is this session object injected onto your routes and controllers? Are you able to reproduce it and show me an example?

In the RFC for 2.0 there is a migration path towards using components. Generally, you would use components but because you can consider this the view that backs your route/controller its perfectly fine to use a view (think of my example as two Index views).

9

@jasonmit, thanks discuss this with me.

Since I am new on ember, i am trying to find library to help instead of writing on my own doing authentication.

I am using ember-simple-auth. It seems quite familiar by the no.of stars in github and active updated. The guide said that GitHub - simplabs/ember-simple-auth: A library for implementing authentication/authorization in Ember.js applications. , the session object will be available in all routes and controllers. by using this.get(‘session’).

In the following example from their guide they are using

{{#if session.isAuthenticated}}
  <a {{ action 'invalidateSession' }}>Logout</a>
{{else}}
  {{#link-to 'login'}}Login{{/link-to}}
{{/if}}

thus the above examples lead me to rewrite as

{{#if session.isAuthenticated}}
   {{outlet}}
{{else}}
   {{outlet}}
{{/if}}

cause i want two different layout with login page and authenticated pages

10

And within your renderTemplate hook on the route this.get('session') is returning undefined?

If that’s the case, the only thing I can suggest is putting a breaking point on the equivalent of this line on within your vendor.js (assuming you’re using ember-cli): ember-simple-auth/setup.js at 68b62eccf5219139fa73a29945cfcee803e6f4dc · simplabs/ember-simple-auth · GitHub

This is where that session object (the key is defined in Configuration.sessionPropertyName) gets injected.

11

No the problem is solved indeed. Just curious that this

{{#if session.isAuthenticated}}
   {{outlet}}
{{else}}
   {{outlet}}
{{/if}}

this snippet of code triggered bug. Perhaps it would become nicer in further version of ember suggested above. Thanks @jasonmit