使用Javascript綁定函數來隱藏DOM和自定義元素

我在項目上使用Polymer。我有一個封裝我整個項目的常規自定義元素，我們稱之爲<my-app></my-app>。我希望每當一個按鈕（<paper-button>,<paper-item>,<my-custom-clickable-item>，...）播放一個聲音。播放聲音沒有問題，但我不知道如何有效地將函數綁定到所需的所有元素。使用Javascript綁定函數來隱藏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

在這種情況下，我會做一個自定義的''，它只包含一個''元素，在'eventDelegates'上有一個'click'，指向觸發'sound'事件的'onClick'函數。 – LostInBrittany

今天晚些時候我會試着做一個例子 – LostInBrittany

使用Javascript綁定函數來隱藏DOM和自定義元素

回答

相關問題