{{outlet}} inside {{if}} = weird behavior

[Steve-OH]

I'm having some trouble with a template where there are two {{outlets}} in an {{if}}, one inside the "then" branch and one inside the {{else}}:

{{if foo}}
    ...
    {{outlet}}
    ...
{{else}}
    ...
    {{outlet}}
    ...
{{/if}}

What happens is that everything starts out fine, but eventually the markup that's supposed to go into the {{outlet}} ends up being inserted twice.

A jsfiddle demonstrating the behavior is here: http://jsfiddle.net/Steve_OH/V5ztf/

Run the fiddle; you start out in Edit View. Click on any of the three names and you'll see them properly rendered into the outlet. Now click on the Thumbnail View link (for the purposes of this example, Thumbnail View looks just like Edit View, except the names are in reverse order and there is no secondary outlet). Click on one of the names. This takes you back to Edit View, and the name is rendered correctly into the outlet as before. Now click on a different name. All of a sudden, the name is rendered twice. Once you get into this "bad" mode, there doesn't seem to be a way to get out without reloading.

[marcioj]

I think that isn't possible to use the same outlet, in one template. You can use for example:

{{outlet}} ... {{outlet "menu"}}

But not

{{outlet}} ... {{outlet}} or {{outlet "menu"}} ... {{outlet "menu"}}

Based on your fiddle, you can get the same behavior using the outlet outside of the if. Like this:

<script type="text/x-handlebars" data-template-name="peeps">
    <h2>Peeps</h2>
    <a href="#/thumbs">Thumbnail View</a> <a href="#/">Edit View</a>
    {{#if isEditorVisible}}
        {{#each peep in controller}}
            <p>{{#linkTo "peep" peep}}{{peep.description}}{{/linkTo}}</p>
        {{/each}}                
    {{/if}}
    {{outlet}}
</script>

Give a look http://jsfiddle.net/marciojunior/nUKyQ/

[Steve-OH]

I can see how having two {{outlet}}s in the same scope could be a problem, but given that these two are effectively in different scopes, I don't see why the template compiler isn't smart enough to deal with it. After all, it's possible to nest {{if}}s and {{each}}es, so the compiler does have to have some notion of a "context stack."

By the way, I know I can move the {{outlet}} outside of the {{if}} in the jsfiddle example, but I can't in the real code, because in the real code the surrounding blocks are different. Imagine this:

{{if foo}}
    <div class="foo">
        <div>
            <p>{{outlet}}</p>
        </div>
    </div>
{{else}}
    <div class="bar">
        <h2>{{outlet}}</h2>
    </div>
{{/if}}

There isn't a practical way to move the {{outlet}} outside of the {{if}} in this case.

[wagenet]

Looks like a duplicate of #3187.

[Steve-OH]

I wouldn't be surprised if the underlying cause is the same as in #3187, but the manifested behavior is actually the opposite; instead of a view disappearing when it shouldn't, in this case it's appearing when it shouldn't. So it's possible that it's a different issue.