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

Question

我是Polymer.js的新手，正在尝试实现一个应用程序抽屉。 这是我到目前为止所拥有的：

<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()">无效1 ）

。

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

}

假设此切换方法正确：

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

，Polymer 2.0的正确语法是什么，该方法到底应放在哪里？

还是有更简单的方式切换抽屉？

谢谢！

Answer 1

您必须将函数放置在扩展Polymer.Element基类的类内。

在Polymer 2您可以将函数定义为：

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

注意：如果使用单个下划线(_functionName) ，它将是受保护的方法或函数；如果使用双下划线(__functionName) ，它将是该类的私有方法或函数。

在上面的代码中，您只需在类中添加函数：

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>