提问者:小点点

即使条件变为假,if语句中的内容仍保留在DOM中-Handlebar/Ember


下面的代码似乎应该显示和隐藏content_1和content_2因为布尔值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的值(FYI:condition_2==!condition_1),而不是显示和隐藏内容1和2,每次迭代只是添加另一个content_1或_2的实例,而不隐藏另一个。

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

在Handlebar/Ember中完成这种显示/隐藏功能的正确方法是什么?

编辑:可能与condition_2 === ! condition_1相关,由Ember控制器指定:

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

编辑2:我意识到正在发生的事情比我上面描述的要微妙得多。content_1和content_2确实出乎意料地保留在DOM中,但不一定在每次迭代中,也不总是在人们可能期望的地方。例如,它直到两到三次迭代才开始,而且往往会发生大量的content_1累积,并且有一半的时间(即对于一个布尔值)它们出现在始终显示的内容和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中删除的标记被放置在任何变形标记之外,我的印象是Ember操作所必需的。


共1个答案

匿名用户

你做得对,你有一个html错误(缺少结束标记,不匹配标记等)

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