javascript - 使用 Polymer 路由事件

Question

我正在尝试使用polymer包裹一个按钮。

HTML：

<polymer-element name="sp-button" attributes="active">
  <template>
    <link rel="stylesheet" href="sp-button.css">
    <button type="button"><content></content></button>
  </template>
  <script src="sp-button.js"></script>
</polymer-element>

JS：

Polymer('sp-button', {
  active: false,
  activeChanged: function() {
    console.log('active ' + this.active);
  }
});

我不确定如何允许该聚合物元素的用户收听单击事件或悬停事件。此外，在两个按钮被包裹在该聚合物元件中的情况下。

Answer 1

Users of your element can setup listeners like any normal HTML elements:

var button = document.querySelector('sp-button');
button.addEventListener('click', function(e) {
  alert('from outside');
});                          

In a polymer-element, you can also capture the click event on the button using on-click, do something interesting with it, and/or fire another event:

<button on-click="clickHandler"><content>Button text</content></button>
...
clickHandler: function(e, detail, sender) {
  alert('from inside'); 
  this.fire('insideclick', {msg: 'from inside'});
}

Full demo: http://jsbin.com/uqubAGO/1/edit

Answer 2

如果您要捕获 click 事件并发送新的内容，您可能希望停止传播 click 事件。

Answer 3

两个按钮的情况看起来像这样：

<polymer-element name="sp-button" attributes="active">
  <template>
    <link rel="stylesheet" href="sp-button.css">
    <button type="button" on-click="onSendClick">Send</button>
    <button type="button" on-click="onReceiveClick">Receive</button>
  </template>
  <script src="sp-button.js"></script>
</polymer-element>

JS：

Polymer('sp-button', {
  //...
  onSendClick: function() {
    this.fire('send');
  },
  onReceiveClick: function() {
    this.fire('receive');
  }
});

然后您可以使用 addEventListener 从外部监听那些特定于域的事件：

var button = document.querySelector('sp-button');
button.addEventListener('send', function(e) {
  //...
});
button.addEventListener('receive', function(e) {
  //...
});

这种方法的好处是它隐藏了用户单击按钮以导致send事件发生的实现细节。就sp-button元素的用户而言，它可能是按钮单击、下拉选择、鼠标悬停或任何数量的导致它的事情。用户关心的只是您的公共 API：当您的元素希望外部世界采取相应的操作时，它会触发一个send事件和一个事件。receive