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

时间:2013-12-19 03:43:05

标签: javascript ember.js handlebars.js

以下代码似乎应该显示并隐藏content_1和content_2作为布尔值条件_1和条件_2在真或假之间切换:

{{#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。

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

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

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

编辑2:我意识到发生的事情比我上面描述的更微妙。 content_1和content_2确实意外地保留在DOM中,但不一定在每次迭代中,并不总是在人们可能期望的地方。例如,它直到两次或三次迭代才开始,并且往往会发生大量content_1 s累积,并且一半时间(即其中一个布尔值)它们总是出现在 - 显示内容和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 个答案:

答案 0 :(得分:1)

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

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