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

Question

我正在使用铁页。里面有四个元素，一个是卡片的网格，其他的是卡片的项目。没有什么花哨。在铁页之外，我在固定位置放置了一些导航按钮（下一个和上一个）。

<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>

Answer 1

这个：

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

应该是这个（还要注意比较中添加的=字符）：

<script>
 _hideControls: function(){
    if (this.pageSelected == 'grid') {
      return true;
    } else {
      return false;
    }
}
</script>

还有，这个：

hidden$="{{_hideControls}}"

应该是这样的：

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

为什么？因为如果函数 returns 为真，隐藏属性将被设置为真（或者更确切地说被保留）。使用语法 _hideControl 而不是 _hideControls() 的唯一一次（据我所知）是当您希望调用一个方法来响应事件时。见下文：

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

编辑要使其在例如 pageSelected 更改时更新，请执行以下操作：

    <script>
     _hideControls: function(pageSelected){
        if (pageSelected == 'grid') {
          return true;
        } else {
          return false;
        }
    }
    </script>

和：

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

现在发生的情况是，每次 pageSelected 更改时，方法 _hideControls 都是运行。很方便！

Answer 2

您需要监听 iron-select 和 iron-deselect 事件。该事件带有所选项目的 id（如果您在 html 中定义了 id）。在您的情况下，您可以检查 id 是否为 grid 然后进行操作。此外，_hideControls 应该是 Boolean 属性。试试下面的代码。

<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>

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

How to use hidden attr only on a specific page when is selected

polymer

polymer-1.0