在Polymer 2.0中为自定义元素编写方法吗？

Question

I'm new to Polymer.js and I'm trying to implement an app-drawer; this is what I have so far:

<app-header reveals>
  <app-toolbar>
    <paper-icon-button icon="menu" on-tap="_toggleDrawer"></paper-icon-button>
    <div main-title>Title</div>
    <paper-icon-button icon="search"></paper-icon-button>
  </app-toolbar>
</app-header>

<app-drawer id="drawer" opened={{drawerOpened}} swipe-open tabindex="0">
</app-drawer>

( <paper-icon-button icon="menu" onclick="drawer.toggle()"> did not work 1 )

.

class MyDrawer extends Polymer.Element {
  static get is() { return 'my-drawer'; }
  static get properties() {
    return {
      prop1: {
        type: String,
        value: 'my-drawer'
      }
    };
  }

}

Assuming this toggle method is correct:

_toggleDrawer: function() {
  this.drawerOpened = !this.drawerOpened;
}

, what's the correct syntax for Polymer 2.0 and where exactly do I place this method?

Or is there a simpler way to toggle the drawer?

Thank you!

Answer 1

You have to place the function inside the class that extends the Polymer.Element base class.

In Polymer 2 you can define a function as:

functionName(parameters if any){
   //definition goes here
}

Note: If you use a single underscore (_functionName) , it will be a protected method or function and if you use double underscore (__functionName) it will be the private method or function to the class.

In your code above, you can simply add the function inside class:

class MyDrawer extends Polymer.Element {

  static get is() { return 'my-drawer'; }

  static get properties() {
    return {
      prop1: {
        type: String,
        value: 'my-drawer'
      }
    };
  }

  _toggleDrawer() {
      this.drawerOpened = !this.drawerOpened;
  }

}

Answer 2

将drawer-toggle属性添加到您的<paper-icon-button>

<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>