如何在poymer js中隐藏下拉列表

Question

我需要隐藏下拉菜单。我试过了。隐藏属性，但不起作用

<paper-dropdown-menu id="firmChannelFilter" hidden="${(this._channelFilterVisibility)}" 
class="small-padding" label="Channel Filter">
<paper-listbox slot="dropdown-content" 
.hidden="${(this._channelFilterVisibility)}" id="firmChannel"

Answer 1

您应该能够按如下方式设置hidden属性：

hidden$="[[_channelFilterVisibility(valueThatChanges)]]"

1. 如果隐藏paper-dropdown-menu，它将自动隐藏paper-listbox，因为它是嵌套元素
2. 如果要更改非聚合物特定的属性/属性，则需要在=之前添加$，即class$="[[_colour(obj.Active)]]"或class$="[[_selectedColour(selectedFilter)]]"或隐藏属性
3. 你不需要this量词-Polymer已经知道并解释了你在[[]]或{{}}之间使用的任何东西都属于this
4. 您必须将属性传递给函数，否则它在页面/元素加载时只调用一次。如果传入一个更改的属性，即过滤器属性，Polymer将在该属性值每次更改时调用该函数
5. 属性是hidden，而不是paper-listbox中的.hidden
6. {{}}用于双向绑定，通常在与显示和设置值的东西交互时使用，例如纸张列表框。[[]]是单向绑定，通常在某个东西只接受一个值时使用

一天下来，你的html代码应该是这样的：

<paper-dropdown-menu id="firmChannelFilter"
hidden$="[[_channelFilterVisibility(filterProperty)]]"
class="small-padding"
label="Channel Filter">
<paper-listbox slot="dropdown-content"
class="dropdown-content"
id="firmChannel"
selected="{{selectedIdString}}"
attr-for-selected="id">
<paper-item id="A">Item A</paper-item>
<paper-item id="B">Item B</paper-item>
<paper-item id="C">Item C</paper-item>
</paper-listbox>
</paper-dropdown-menu>

简言之，这是一个下拉菜单，有3个项目：项目a、项目B和项目C。当您选择其中一个项目时，它将把this.selectedIdString的值设置为字符串"；A"B"；，或"；C"；。当this.filterProperty的值发生变化时，将使用新值作为传入参数来调用函数this._channelFilterVisibility。