The following code seems like it should show and hide content_1 and content_2 as the booleans condition_1 and condition_2 toggle between true or false:
{{#if condition_1}}
<!-- content_1 -->
{{/if}}
<!-- always-displayed content -->
{{#if condition_2}}
<!-- content_2 -->
{{/if}}
On first pageload, only content_1 or content_2 is displayed, as expected. But if I toggle the values of condition_1 and condition_2 (FYI: condition_2 == !condition_1), instead of showing and hiding content 1 and 2, each iteration simply adds another instance of content_1 or _2, without hiding the other.
In other words, setting condition_1 to true causes content_1 to be displayed, but subsequently setting condition_1 to false doesn't remove content_1 from the DOM.
What's the right way to accomplish this kind of show/hide functionality in Handlebars/Ember?
Edit: It may be relevant that condition_2 === !condition_1, as specified by the Ember controller:
condition_2: (->
!@get('condition_1')
).property('condition_1')
Edit 2: I'm realizing that what's happening is a bit more subtle than what I described above. content_1 and content_2 do remain in the DOM unexpectedly, but not necessarily on every iteration, and not always in the places one might expect. For example, it doesn't start until two or three iterations, and what tends to happen is lots of content_1s accumulating, and half the time (i.e. for one of the boolean values) they show up between the always-displayed content and content_2, rather than at the top like you'd expect.
Also, inspecting the DOM revealed unmatched start/end pairs of metamorph tags – perhaps this is entirely normal, but I thought it might be a clue (note 54 and 56):
<script id="metamorph-53-start" type="text/x-placeholder"></script>
<script id="metamorph-54-start" type="text/x-placeholder"></script>
<script id="metamorph-54-start" type="text/x-placeholder"></script>
<script id="metamorph-54-end" type="text/x-placeholder"></script>
<script id="metamorph-53-end" type="text/x-placeholder"></script>
<script id="metamorph-55-start" type="text/x-placeholder"></script>
<script id="metamorph-56-start" type="text/x-placeholder"></script>
<script id="metamorph-56-start" type="text/x-placeholder"></script>
<script id="metamorph-56-end" type="text/x-placeholder"></script>
<script id="metamorph-55-end" type="text/x-placeholder"></script>
Edit 3: It seems like the markup that isn't being removed from the DOM is being placed outside of any metamorph tags, which I was under the impression were necessary for Ember manipulation.
