Javascript Binding Function to Shadow DOM и пользовательские элементы

Я использую Polymer по проекту. У меня есть общий пользовательский элемент, который инкапсулирует весь мой проект, назовем его <my-app></my-app>. Я хочу, чтобы всякий раз, когда кнопка (<paper-button>, <paper-item>, <my-custom-clickable-item>, ...) воспроизводится звук. Воспроизведение звука не проблема, но я не совсем знаю, как эффективно привязывать функцию ко всем элементам, которые я хочу.Javascript Binding Function to Shadow DOM и пользовательские элементы

Я знаю, что есть способ fire custom events, но если <my-custom-clickable-item> будет находиться внутри другого элемента <another-custom-element>, я должен был бы поймать его там и передать его через к <my-app>, что на самом деле не является хорошим решением либо.

Рядом с привязкой звука к кнопке было бы идеально, что в зависимости от того, имеет ли элемент атрибут disabled, будет воспроизводиться другой звук.

Вот пример кода, как выглядит мой вид приложения.

<polymer-element name="my-app"> 
    <template> 
     <audio id="mySound" style="display: none;"> 
      <source src="assets/mySound.wav" type="audio/wav"> 
     </audio> 
     <paper-button>I make sound!</paper-button> 
     <my-custom-clickable-item>I make sound as well!</my-custom-clickable-item> 

     <paper-button disabled>I should make another sound though...</paper-button> 

     <just-another-element></just-another-element> 
    </template> 
    <script> 
     Polymer('my-app', { 
      makeNoise: function(){ 
       this.$.mySound.play(); 
      } 
     }); 
    </script> 
</polymer-element> 

<polymer-element name="just-another-element"> 
    <template> 
     <p>I am another custom element, with other buttons!</p> 
     <paper-button>Sound sound sound</paper-button> 
    </template> 
    <script> 
     Polymer(); 
    </script> 
</polymer-element>

источник

2015-01-02 jdepypere

Если ваш запускает событие, оно должно появиться до корня вашего приложения или . Если вы настроили слушателя в моем приложении и запустили пользовательское событие в , слушатель в должен его поймать. – andrsnn

@ user2210274: а как насчет '' (или что-то еще) в ''? – jdepypere

Поскольку вы хотите, чтобы разные звуки воспроизводились, вы можете прикрепить специальный объект, когда вы запускаете событие с правильным звуком, а затем обрабатываете его таким же образом в родительском элементе. 'var temp = {sound = 'path'}; this.fire ('customEvent', temp); ' – andrsnn

События могут возникать без проблем, даже внутри других элементов. И вы можете использовать метод fire для добавления сведений об элементе отправителя, например, если он отключен или нет. Затем в главном дескрипторе события вы можете воспроизводить разные звуки в соответствии с этими деталями.

Здесь у вас есть быстрый пример:

<html> 
<head> 
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> 
    <title>seed-element Demo</title> 
    <script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script> 
    <link rel="import" href="https://www.polymer-project.org/components/polymer/polymer.html"> 
    <link rel="import" href="https://www.polymer-project.org/components/core-elements/core-elements.html"> 
    <link rel="import" href="https://www.polymer-project.org/components/paper-elements/paper-elements.html"> 

</head> 

<body> 

    <my-app></my-app> 


    <polymer-element name="my-app"> 
    <template> 
     <style> 
     paper-button[disabled] { 
      pointer-events: all !important; 
     } 
     </style> 
     <audio id="soundWhenEnabled" style="display: none;"> 
     <source src="assets/mySoundEnabled.wav" type="audio/wav"> 
     </audio> 
     <audio id="soundWhenDisabled" style="display: none;"> 
     <source src="assets/mySoundDisabled.wav" type="audio/wav"> 
     </audio> 
     <paper-button id="b1" raised on-click="{{onClick}}">I make sound!</paper-button> 
     <my-custom-clickable-item id="b2" on-click="{{onClick}}">I make sound as well!</my-custom-clickable-item> 

     <paper-button id="b3" disabled raised on-click="{{onClick}}">I should make another sound though...</paper-button> 

     <just-another-element></just-another-element> 
    </template> 
    <script> 
     Polymer('my-app', { 
     eventDelegates: { 
      //click: 'onClick', 
      sound: 'makeNoise' 
     }, 
     onClick: function(event, detail, sender) { 
      console.log("Click "+sender.hasAttribute('disabled')) 
      this.fire('sound', {id:sender.id, disabled: sender.hasAttribute('disabled')}); 
     }, 
     makeNoise: function(event, detail, sender){ 
      console.log(detail) 
      if (detail.disabled) { 
      //this.$.soundWhenDisabled.play(); 
      alert("I make noise disabled"); 
      } else { 
      //this.$.soundWhenEnabled.play(); 
      alert("I make noise enabled"); 
      } 
     } 
     }); 
    </script> 
    </polymer-element> 

    <polymer-element name="just-another-element"> 
    <template> 
     <p>I am another custom element, with other buttons!</p> 
     <paper-button id="b4" raised on-click="{{onClick}}">Sound sound sound</paper-button> 
    </template> 
    <script> 
     Polymer('just-another-element', { 
     onClick: function(event, detail, sender) { 
      console.log("Click "+sender.hasAttribute('disabled')) 
      this.fire('sound', {id:sender.id, disabled: sender.hasAttribute('disabled')}); 
     } 
     }); 
    </script> 
    </polymer-element> 

</body> 
</html>

Plunker здесь: http://plnkr.co/edit/SOwYbU3Fvlhp0MgvM60H?p=preview

Я надеюсь, что это помогает :) Как обычно, не стесняйтесь обратиться за точности

источник

2015-01-03 22:14:24 LostInBrittany

Мне это нравится, но, как я уже упоминал, было бы легко, если бы мне не нужно вручную прикреплять' onClick' -функцию к каждой кнопке, так как это подвержено ошибкам (например, забыв об этом). Возможно ли, или лучше сделать пользовательский элемент, который имеет в нем, например, '', но с 'onClick'? – jdepypere

В этом случае я бы сделал пользовательский '', содержащий только элемент '' с 'click' на его' eventDelegates', указывающий на функцию 'onClick', которая запускает событие' sound'. – LostInBrittany

Я попытаюсь сделать пример этого позже сегодня – LostInBrittany

Javascript Binding Function to Shadow DOM и пользовательские элементы

ответ

Смежные вопросы