javascript - 即使条件变为 false，if 语句中的内容仍保留在 DOM 中 - Handlebars/Ember

Question

以下代码似乎应该显示和隐藏 content_1 和 content_2，因为 bool 值 condition_1 和 condition_2 在 true 或 false 之间切换:

{{#if condition_1}}
  <!-- content_1 -->
{{/if}}
<!-- always-displayed content -->
{{#if condition_2}}
  <!-- content_2 -->
{{/if}}

在第一个页面加载时，如预期的那样，仅显示 content_1 或 content_2。但是，如果我切换 condition_1 和 condition_2 的值(仅供引用:condition_2 == !condition_1)，则每次迭代只是添加 content_1 或 _2 的另一个实例，而不隐藏另一个实例，而不是显示和隐藏内容 1 和 2。

换句话说，将 condition_1 设置为 true 会导致显示 content_1，但随后将 condition_1 设置为 false 不会从 DOM 中删除 content_1。

在 Handlebars/Ember 中实现这种显示/隐藏功能的正确方法是什么？

编辑:条件_2 === !condition_1 可能相关，由 Ember Controller 指定:

condition_2: (->
  !@get('condition_1')
).property('condition_1')

编辑 2:我意识到正在发生的事情比我上面描述的要微妙一些。 content_1 和 content_2 确实意外地保留在 DOM 中，但不一定在每次迭代中，并且并不总是在人们可能期望的位置。例如，它直到两到三次迭代才开始，并且往往会发生大量 content_1 累积，并且有一半的时间(即对于 bool 值之一)它们出现在始终显示的内容和 content_2，而不是像您期望的那样显示在顶部。

此外，检查 DOM 发现了不匹配的开始/结束对变形标记 - 也许这完全正常，但我认为这可能是一个线索(注释 54 和 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>

编辑 3: 似乎未从 DOM 中删除的标记被放置在任何 Metamorph 标记之外，我认为这对于 Ember 操作是必要的。

Answer 1

你做得对，你有一个 html 错误(缺少结束标签、不匹配的标签等)

http://emberjs.jsbin.com/oJOFimom/1/edit