Question

我是Polymer.js的新手，我正在尝试实现app-drawer;这就是我到目前为止所做的：

<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中添加函数：

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中为自定义元素编写方法？

2 个答案: