You're viewing an older version of Polymer. Please see Polymer 3.0 for the latest.

当然,一个按钮如果不能点击,那它就不是一个按钮。

To toggle the button, add an event listener. Polymer lets us add event listeners with simple on-event annotations in an element's template. Modify your code to use the Polymer on-click annotation to listen for the button's click event:

icon-toggle.html

<iron-icon icon="[[toggleIcon]]" on-click="toggle"></iron-icon>

on-click is different from onclick. This is different from the standard element.onclick property. The dash in on-click indicates a Polymer annotated event listener.

The code above calls a method called toggle when the button is pressed.

Now, create the toggle method to toggle the pressed property when the button is pressed. Place the toggle method inside the class definition for IconToggle, after the constructor.

icon-toggle.html

toggle() {
  this.pressed = !this.pressed;
}

Your code should now look like this:

icon-toggle.html

<script>
  class IconToggle extends Polymer.Element {
    static get is() { 
      return 'icon-toggle';
    }
    static get properties() {
      return {
        pressed: {
          type: Boolean,
          notify: true,
          reflectToAttribute: true,
          value: false
        },
        toggleIcon: {
          type: String
        }
      }
    }
    constructor() {
      super();
    }
    toggle() {
      this.pressed = !this.pressed;
    }
  }

  customElements.define(IconToggle.is, IconToggle);
</script>

Save the icon-toggle.html file and look at the demo again. You should be able to press the button and see it toggle between its pressed and unpressed states.

Demo showing icon toggles with star and heart icons.

了解更多:数据绑定。 要了解演示如何工作,请打开 demo-element.html 并看一看里面(如果您已下载代码,您将在 demo 文件夹中找到该文件。) 是的,该元素的演示 也是 一个元素。 该元素使用 双向数据绑定被计算的绑定 来更改当您切换按钮时显示的字符串。

上一步:使用数据绑定和属物 下一步:用自定义 CSS 属物主题化