聚合物2.0數據綁定 - 從html屬性到聚合物類

我希望與聚合物紙張元素下拉菜單具有禁用的相同功能。聚合物2.0數據綁定 - 從html屬性到聚合物類

下拉菜單代碼：

<paper-dropdown-menu label="Disabled dinosaurs" disabled> 
<paper-listbox class="dropdown-content"> 
    <paper-item>allosaurus</paper-item> 
    <paper-item>brontosaurus</paper-item> 
    <paper-item>carcharodontosaurus</paper-item> 
    <paper-item>diplodocus</paper-item> 
    </paper-listbox> 
</paper-dropdown-menu>

在第一行有：<paper-dropdown-menu label="Disabled dinosaurs" disabled>

的問題是如何傳遞到聚合物類this.disabled = true如果禁用參數是<my-element tag> ？

所以當我有<my-element disabled> this.disabled=true和<my element nothing there>this.disabled=false？

來源

2017-05-13 Maciej Wójcik

你可以更新的代碼？定期數據綁定應該工作，但實施取決於在哪裏 – Nicolas

應該只使用具有布爾類型和reflectToAttribute的聚合物屬性。

<html> 
 
<head> 
 
\t <base href="http://polygit.org/polymer+v2.0.0-rc.7/webcomponentsjs+v1.0.0-rc.11/shadydom+webcomponents+:master/shadycss+webcomponents+:master/components/"> 
 

 
\t <link href="polymer/polymer.html" rel="import"> 
 

 
\t <script src="webcomponentsjs/webcomponents-loader.js"> </script> 
 
</head> 
 

 
<body> 
 

 
<my-el disabled> 
 
\t <h3>Disabled Element</h3> 
 
</my-el> 
 
\t 
 
<my-el> 
 
\t <h3>Enabled Element</h3> 
 
</my-el> 
 

 

 
<dom-module id="my-el"> 
 
\t <template> 
 
\t \t <style> 
 
\t \t \t .disabledInfo { display: none; } 
 
\t \t \t :host([disabled]) .disabledInfo { display: block; } 
 
\t \t \t :host([disabled]) .enabledInfo { display: none; } 
 
\t \t </style> 
 
\t \t <slot></slot> 
 
\t \t <div class="disabledInfo">I am disabled</div> 
 
\t \t <div class="enabledInfo">I am enabled</div> 
 
\t \t <br /><br /> 
 
\t </template> 
 
\t <script> 
 
\t \t class MyEl extends Polymer.Element { 
 
\t \t \t static get properties() { 
 
\t \t \t \t return { 
 
\t \t \t \t \t disabled: { 
 
\t \t \t \t \t \t type: Boolean, 
 
\t \t \t \t \t \t reflectToAttribute: true, 
 
\t \t \t \t \t \t value: false 
 
\t \t \t \t \t } 
 
\t \t \t \t }; 
 
\t \t \t } 
 
\t \t \t static get is() { return 'my-el'; } 
 
\t \t } 
 
\t \t customElements.define(MyEl.is, MyEl); 
 
\t </script> 
 
</dom-module> 
 

 
</body> 
 
</html>

看到它也codepen http://codepen.io/daKmoR/pen/pPKJxN?editors=1000

來源

2017-05-14 17:25:47 daKmoR

這是好的，但如何體現這個「禁用」JS變量？我知道在這個例子中我們可以讀取的是中的禁用和在CSS中使用，但是如何讀取JS中禁用的值？ –

哦，一切工作正常時，JS變量是「someWord」，在HTML是「一些詞」，但當變量是單個詞，那麼它不會工作 - 任何想法如何？ –

在這個例子中，你可以很容易做到裏面的類（如）connectedCallback你可以只用'this.disabled'將返回真/假「外部」腠可以使用 'document.getElementsByTagName（'我-EL '）[0] .disabled'將返回true 'document.getElementsByTagName（'my-el'）[1] 「（空字符串），如果沒有設置，則返回null – daKmoR

聚合物2.0數據綁定 - 從html屬性到聚合物類

回答

相關問題