Как использовать скрытый attr только на определенной странице, когда выбрано

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()}}" 

Почему? Поскольку скрытый атрибут будет установлен в true (или, скорее, будет сохранен), если функция вернет true. Единственный раз, когда я использую синтаксис _hideControl вместо _hideControls(), - это когда вы хотите, чтобы метод вызывался в ответ на событие. Смотрите ниже:

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

EDIT Чтобы сделать это обновление, когда, например, pageSelected изменения, сделайте следующее:

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

и:

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

Что же теперь, что метод _hideControls запускается каждый раз, когда изменяется pageSelected. Очень удобно!

Answer 2

Вам необходимо прослушать iron-select и iron-deselect event. Событие поставляется с id выбранного элемента (если у вас есть идентификатор, определенный в html). В вашем случае вы можете проверить, равен ли идентификатор 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>