Question

我需要这个可以装饰事件处理程序的自定义元素，例如单击按钮时显示确认对话框。具体来说，我需要知道事件处理程序的名称，以便能够使用this.unlisten将其删除并为其定义包装。

Answer 1

目前还没有针对此的公共API，但是您可以使用以下代码，这些代码将进入Polymer内部以获取绑定的事件侦听器。 由于它使用了Polymer的私有API，因此该解决方案无法在将来的版本中使用。

在Polymer 1.5.0中，event listeners被添加到内部属性__boundListeners，这是方法名称的事件名称映射。此地图中密钥的格式为"<eventName>:<methodName>"（例如"tap:_handleTap"）。因此，您可以通过搜索__boundListeners找到所有倾听特定事件的方法：

function getListenerMethods(target, eventName) {
  var boundListeners = this.__boundListeners || {};
  var listeners = boundListeners.get(target) || {};
  var methodNames = Object.keys(listeners).filter(function(key) {
    return key.split(':')[0] === eventName;
  }).map(function(key) {
    return key.split(':')[1];
  });
  return methodNames;
},

在下面的演示中，我使用Polymer.Base上的mixin添加unlistenAll()，这允许您使用Polymer对象中的函数，如下所示：

this.unlistenAll(this.$.myButton, 'click');

这是演示：

＆＃13;

<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="paper-button/paper-button.html">
</head>
<body>
  <x-foo></x-foo>

  <script>
    HTMLImports.whenReady(function() {
      // Mixin
      Polymer.Base._addFeature({
        /**
        * Gets the names of all methods listening to an element's event.
        *
        * @param {Element} target Node element to retrieve method names from.
        * @param {String} eventName Name of event to look up.
        * @returns {Array} names of handler methods on `this`
        */
        getListenerMethods: function(target, eventName) {
          var boundListeners = this.__boundListeners || {};
          var listeners = boundListeners.get(target) || {};
          var methodNames = Object.keys(listeners).filter(function(key) {
            return key.split(':')[0] === eventName;
          }).map(function(key) {
            return key.split(':')[1];
          });
          return methodNames;
        },

        /**
        * Removes all listeners of a specific event from a given element.
        *
        * @param {Element} target Element to remove event listener from.
        * @param {String} eventName Name of event to stop listening to.
        */
        unlistenAll: function(target, eventName) {
          var self = this;
          this.getListenerMethods(target, eventName).forEach(function(methodName) {
            console.log('unlistening "' + eventName + ':' + methodName + '" from:', target);
            self.unlisten(target, eventName, methodName);
          });
        }
      });
    });
  </script>

  <dom-module id="x-foo">
    <template>
      <paper-button id="btn" on-click="_click">click</paper-button>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',

          _click: function() {
            console.log('clicked');
          },

          ready: function() {
            this.unlistenAll(this.$.btn, 'click');
          }
        });
      });
    </script>
  </dom-module>
</body>

＆＃13;

^codepen

如何在纸张按钮中获取分配给值的值？

1 个答案: