[英]Rewrite Polymer 1.0 snippet to Polymer 2
I have found a Polymer 1 sample and I would like to use it in my Polymer 2 application. 我已经找到了Polymer 1样品,我想在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>
The small part that would have to be changed for Polymer 2 is just the js code at the bottom, but since I am new to Polymer and js, all my previous attempts to change the code to the new ES6 syntax didn't work out. 对于Polymer 2,必须更改的一小部分只是底部的js代码,但是由于我是Polymer和js的新手,所以我之前所有尝试将代码更改为新的ES6语法的尝试都没有成功。
Any help would be really appreciated! 任何帮助将非常感激!
The Polymer 2.0 equivalent (in ES6) of that JavaScript would be this element definition: 该元素定义与该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();
}
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.