Polymer 2.0データバインディング - htmlプロパティからPolymerクラスへ

Polymer paper-elementsドロップダウンメニューと同じ機能を無効にしたいと思います。Polymer 2.0データバインディング - htmlプロパティからPolymerクラスへ

ドロップダウンメニューコード：最初の行で

<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>

問題は無効パラメータが<my-element tag>である場合=真this.disabledポリマークラスに渡す方法であります？

したがって、私は<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が "some-word"のときはすべてうまく動いていますが、変数がシングルワードであれば、それはうまくいかないのですか？あなたは簡単にクラス（例えば）内を行うことができます。この例では –

はあなただけCOUは 'document.getElementsByTagName（ '私の-ELを使用できる「外部」真/偽を返しますどの' this.disabled'を使用することができますconnectedCallback '）[0] .disabled' trueを返す 'document.getElementsByTagName（' my-el '）[1] .disabled'これは偽を返しますあなたはgetAttribute（' disabled ' "（空文字列）（設定されている場合）、そうでない場合はnull – daKmoR

Polymer 2.0データバインディング - htmlプロパティからPolymerクラスへ

答えて

関連する問題