javascript - 将 Polymer 1.0 片段重写为 Polymer 2

Question

我找到了 Polymer 1 sample ，我想在我的 Polymer 2 应用程序中使用它。

   <app-header-layout>

    <app-header fixed effects="waterfall" slot="header">
      <app-toolbar>
        <paper-icon-button id="toggle" icon="menu"></paper-icon-button>
        <div main-title>Inbox</div>
      </app-toolbar>
    </app-header>

    <app-drawer-layout id="drawerLayout">

      <app-drawer slot="drawer">
         ...
      </app-drawer>

      <sample-content size="100"></sample-content>

    </app-drawer-layout>

  </app-header-layout>

  <script>
    var drawerLayout = document.getElementById('drawerLayout');
    toggle.addEventListener('click', function() {
      if (drawerLayout.forceNarrow || !drawerLayout.narrow) {
        drawerLayout.forceNarrow = !drawerLayout.forceNarrow;
      } else {
        drawerLayout.drawer.toggle();
      }
    });
  </script>

Polymer 2 需要更改的小部分只是底部的 js 代码，但由于我是 Polymer 和 js 的新手，所以我之前所有将代码更改为新的 ES6 语法的尝试都没有成功锻炼。

任何帮助将不胜感激!

Answer 1

该 JavaScript 的 Polymer 2.0 等效项(在 ES6 中)将是以下元素定义:

class XFoo extends Polymer.Element {
  static get is() { return 'x-foo'; }

  ready() {
    super.ready();

    const drawerLayout = this.$.drawerLayout;
    this.$.toggle.addEventListener('click', () => {
      if (drawerLayout.forceNarrow || !drawerLayout.narrow) {
        drawerLayout.forceNarrow = !drawerLayout.forceNarrow;
      } else {
        drawerLayout.drawer.toggle();
      }
    });
  }
}

demo