重写聚合物1.0片段到聚合物2

我找到了聚合物1样本，我想在我的聚合物2应用程序中使用它。重写聚合物1.0片段到聚合物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>

，将不得不改变对聚合物2的小部分，只是在底部的js代码，但由于我是新来的聚合物和js，我以前所有的尝试将代码更改为新ES6语法没有解决。

任何帮助将非常感谢！

来源

2017-10-11 stefanmuke

可以搜索这些元素（如“应用程序报头布局”的“ app-toolbar'，'app-drawer'）：https：//www.webcomponents.org/author/PolymerElements 它会默认显示最新版本（Polymer 2），您可以从下拉列表中更改版本（选中时元素的名称旁边）更旧并进行比较。 – Harman

@哈曼我刚刚在HTML中解释了JavaScript代码片段。我只想将Polymer 1.0 JavaScript代码的几行翻译成Polymer 2.0的新ES6语法，因为语法在1和2.0之间以不兼容的方式进行了更改。 – stefanmuke

聚合物2.0当量（以ES6）的JavaScript的将是这些元素的定义：

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

来源

2017-10-14 00:29:53 tony19

重写聚合物1.0片段到聚合物2

回答

相关问题