Question

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

我知道有fire custom events方式，但如果<my-custom-clickable-item>位于另一个元素<another-custom-element>内，我需要抓住它并将其传递给{{ 1}}，这也不是一个很好的解决方案。

除了仅将声音绑定到按钮之外，最理想的是，根据项目是否具有<my-app>属性，还会播放另一种声音。

以下是我的应用程序外观的一些示例代码。

disabled

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绑定功能到Shadow DOM和自定义元素

1 个答案: