[英]Polymer - Nesting a content tag inside a conditional template
I'm using a conditional template to distribute content that is passed into the element. 我正在使用条件模板来分发传递到元素中的内容。 If the condition is true, it will show the first content element, otherwise the second.
如果条件为真,它将显示第一个内容元素,否则显示第二个。 I noticed that when I update the condition the already distributed content is not updated.
我注意到当我更新条件时,已经分发的内容不会更新。 Once it is visible it will remain visible.
一旦可见,它将保持可见。 My first attempt looked like this:
我的第一次尝试是这样的:
<template is="dom-if" if="{{test}}">
<content select=".first">
</content>
</template>
<template is="dom-if" if="{{!test}}">
<content select=".second">
</content>
</template>
I noticed that it will work, if the content is wrapped in another element. 我注意到,如果将内容包装在另一个元素中,它将起作用。
<template is="dom-if" if="{{test}}">
<div>
<content select=".first">
</content>
</div>
</template>
<template is="dom-if" if="{{!test}}">
<div>
<content select=".second">
</content>
</div>
</template>
I've created a plunker that demonstrates both cases. 我创建了一个展示这两种情况的插件 。 Is there an explanation for this behaviour?
有这种行为的解释吗? Is it on purpose or a bug?
是故意还是错误?
This is actually per design. 这实际上是每个设计。 Here`s what the Polymer team had to say on the issue on Github.
这是Polymer小组在Github上必须就此发表的看法。
Hiding a
<content>
has no effect on the visibility of its distributed children (per spec), so your options are to wrap the content with a wrapper element that can be hidden (and will hide the distributed children), or userestamp
which will pull the<content>
out of the DOM all together.隐藏
<content>
对其分布式子级的可见性没有影响(根据规范),因此您的选择是使用可以隐藏(并隐藏分布式子级)的wrapper元素包装内容,或使用restamp
将<content>
一起拉出DOM。 It is slightly unintuitive that the restamp and non-restamp setups work differently, however it is a result of the non-restamp behavior which hides rather than destroying DOM as a performance optimization.重整和非重整设置的工作方式不同是有点不直观的,但是这是非重整行为的结果,它隐藏而不是破坏DOM作为性能优化。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.