Javascript 将函数绑定到阴影 DOM 和自定义元素

Question

我正在一个项目中使用 Polymer。我有一个通用的自定义元素，它封装了我的整个项目，我们称之为 <my-app></my-app>。我希望每当按钮（<paper-button>、<paper-item>、<my-custom-clickable-item>、...）播放声音时。声音的播放没有问题，但我不太清楚如何有效地将函数绑定到我想要的所有元素。

我知道有一种方法可以到达 fire custom events，但是如果 <my-custom-clickable-item> 会在另一个元素 <another-custom-element> 内，我需要在那里捕获它并将它传递给 [=19] =]，这也不是一个很好的解决方案。

除了仅将声音绑定到按钮之外，理想的做法是根据项目是否具有 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>

Answer 1

事件可以毫无问题地冒泡，即使在其他元素中也是如此。您可以使用 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

希望对您有所帮助:) 像往常一样，不要犹豫，要求精确度

Javascript 将函数绑定到阴影 DOM 和自定义元素

Javascript Binding Function to Shadow DOM and Custom Elements

javascript

binding

shadow-dom

polymer