重寫聚合物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

回答

相關問題