Как отменить событие активной панели инструментов при нажатии на бумажную вкладку внутри панели инструментов

Question

Когда я нажимаю на место над бумажными вкладками в режиме водопада высокого уровня, я хочу вызвать домашнюю функцию.

<core-header-panel mode="waterfall-tall"> 

     <core-toolbar class="animate" id="core_bar" on-tap={{home}}> 

      <paper-tabs selected="0" self-end id="paper_tabs"> 
       <paper-tab>0</paper-tab> 
       <paper-tab>1</paper-tab> 
       <paper-tab>2</paper-tab> 
       <paper-tab>3</paper-tab> 
      </paper-tabs> 

     </core-toolbar> 

     <core-animated-pages transitions="slide-from-right" selected="{{ $.paper_tabs.selected }}" id="core_pages"> 

      <section></section> 
      <section></section> 
      <section></section> 
      <section></section> 
      <section>My home</section> 

     </core-animated-pages> 

    </core-header-panel> 

Это вызывает функцию дома, но когда я нажимаю на бумажную вкладку, вызывается также функция дома. Как я могу отменить функцию дома, когда я нажимаю на бумажную вкладку?

<script> 
    Polymer('my-pages', { 
     home:function(){ 
      this.$.paper_tabs.selected=4 
     } 
    }); 
</script> 

Answer 1

Вы можете сделать это следующим образом:

home: function(e) { 
    // make sure this tap was on the core-toolbar itself 
    if (e.target.localName === 'core-toolbar') { 
    this.$.paper_tabs.selected = 4; 
    } 
} 

Однако, ссылаясь на $.paper_tabs этот путь не является хорошей практикой. Вместо этого решите, что ваш my-pages имеет свойство для activePage и привязывает элементы пользовательского интерфейса к этому свойству. Таким образом, ваша логика и ваш пользовательский интерфейс шаблона слабо связаны.

... 
<template> 
... 
      <paper-tabs selected="{{activePage}}" self-end> 
... 
     <core-animated-pages selected="{{activePage}}" transitions="slide-from-right"> 
... 
</template> 
<script> 
    Polymer({ 
    activePage: 0, 
    home: function(e) { 
     if (e.target.localName === 'core-toolbar') { 
     this.activePage = 4; 
     } 
    } 
    }); 
</script> 

Как правило, стараются избегать использования id вообще в шаблоне. Это означает, что ваш элемент управляется данными, и вы можете изменить свой интерфейс, не касаясь вашего скрипта.