Polymer 选择时如何仅在特定页面上使用隐藏属性

我用的是铁皮书页。里面有四个元素，一个是卡片的网格，另一个是卡片的项目。没什么特别的。 在铁皮书页的外面，我放置了一些导航按钮（下一个和上一个）和固定位置

<iron-pages id="pages" class="flex" attr-for-selected="page" selected="{{pageSelected}}">

    <my-grid id="grid" page="grid"></my-grid>

    <page-alpha page="alpha"></page-alpha>
    <page-beta  page="beta"></page-beta>
    <page-gamma page="gamma"></page-gamma>

</iron-pages>

              <!-- Navigation Buttons -->
<div id="controls" class="buttons" hidden$="{{_hideControls}}">
   <button-previous id="previous" on-tap="_goPrev"></button-previous>
   <button-next id="next" on-tap="_goNext"></button-next>
</div>

我的问题是：如何仅当我在网格页面时才隐藏导航按钮

我有一些想法，但我认为语法不正确，或者缺少一些东西

<script>
 _hideControls: function(){
    if (this.pageSelected = 'grid') {
      this.$.controls.hide();
    } else {
      this.$.controls.show();
    }
}
</srcipt>

_hideControl:function（）{
如果（this.pageSelected='grid'）{
此.$.controls.hide（）；
}否则{
此.$.controls.show（）；
}
}

这是：

<script>
 _hideControls: function(){
    if (this.pageSelected = 'grid') {
      this.$.controls.hide();
    } else {
      this.$.controls.show();
    }
}
</script>

此外，这：

hidden$="{{_hideControls}}"

应该是这样的：

hidden$="{{_hideControls()}}"

为什么?？因为如果函数返回true，隐藏属性将被设置为true（或者说保留）。据我所知，您使用语法

\u hideControl

而不是

\u hideControl（）

的唯一时间是希望调用一个方法来响应事件。见下文：

<div on-tap="_hideControls"></div>

以及：

---

现在的情况是，每次更改

pageSelected

时都会运行方法

\u hideControl

。非常方便

您需要收听

iron select

和

iron deselect

事件。事件附带所选项目的

id

（如果您在html中定义了id）。在本例中，您可以检查id是否为

grid

，然后执行操作。此外，_hideControl应该是一个

布尔属性。试试下面的代码

<iron-pages id="pages" class="flex" attr-for-selected="page" selected="{{pageSelected}}" 
on-iron-select="onSelect" on-iron-deselect="onDeselect">

    <my-grid id="grid" page="grid"></my-grid>

    <page-alpha page="alpha"></page-alpha>
    <page-beta  page="beta"></page-beta>
    <page-gamma page="gamma"></page-gamma>

</iron-pages>

              <!-- Navigation Buttons -->
<div id="controls" class="buttons" hidden$="{{hideControls}}">
   <button-previous id="previous" on-tap="_goPrev"></button-previous>
   <button-next id="next" on-tap="_goNext"></button-next>
</div>



脚本：

<script>
 onSelect: function(e) {
   if(e.detail.item.id === 'grid') {
     this.hideControls = true;
   }
 }
 onDeselect: function(e) {
   if(e.detail.item.id === 'grid') {
     this.hideControls = false;
   }
 }
</script>


onSelect：函数（e）{
如果（e.detail.item.id=='grid'）{
this.hideControl=true；
}
}
onDeselect：功能（e）{
如果（e.detail.item.id=='grid'）{
this.hideControl=false；
}
}
谢谢，显然这只会隐藏控件，即使所选页面已更改为其他页面，也不会再次显示。有什么想法吗？。我将在文档中进一步研究是的，如果您希望在发生更改时也将其更改回来，则必须将
pageSelected
传递给该方法。请参阅文章的编辑部分！：）我正在深入研究这个解决方案，起初不起作用，但后来检查了两次，我的解决方案中出现了一个类型错误。这也是可行的，我将函数的语法更改为更简单的条件（三元）运算符：_hideControl:function（pageSelected）{return This.pageSelected=='grid'？true:false；}很好用！我还注意到，您的原始帖子是赋值的，而不是与字符串“grid”进行比较（不确定这是否是您提到的打字错误），但我不小心将您的错误复制到了我的“工作”示例中，现在已对其进行了更新：是 啊这似乎奏效了。在我看来，仅仅是toogle类不显示任何内容，或者为元素设置一个属性，都有点复杂，但是这样我就可以了。再次感谢。
hidden$="{{_hideControls(pageSelected)}}"

<iron-pages id="pages" class="flex" attr-for-selected="page" selected="{{pageSelected}}" 
on-iron-select="onSelect" on-iron-deselect="onDeselect">

    <my-grid id="grid" page="grid"></my-grid>

    <page-alpha page="alpha"></page-alpha>
    <page-beta  page="beta"></page-beta>
    <page-gamma page="gamma"></page-gamma>

</iron-pages>

              <!-- Navigation Buttons -->
<div id="controls" class="buttons" hidden$="{{hideControls}}">
   <button-previous id="previous" on-tap="_goPrev"></button-previous>
   <button-next id="next" on-tap="_goNext"></button-next>
</div>

<script>
 onSelect: function(e) {
   if(e.detail.item.id === 'grid') {
     this.hideControls = true;
   }
 }
 onDeselect: function(e) {
   if(e.detail.item.id === 'grid') {
     this.hideControls = false;
   }
 }
</script>