在 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 基础 class 的 class 中。

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

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.

在上面的代码中，您可以简单地在 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>

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

Writing a method for a custom element in Polymer 2.0?

javascript

polymer

polymer-2.x