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>

첫 번째 행이있다 : 질문은 = 사실 this.disabled, 장애인 매개 변수 <my-element tag>에있는 경우 폴리머 클래스에 전달하는 방법이다 <paper-dropdown-menu label="Disabled dinosaurs" disabled>

내가 <my-element disabled> this.disabled=true 일 때 <my element nothing there>this.disabled=false 일 때?

출처

2017-05-13 Maciej Wójcik

당신이 와 코드를 업데이트 할 수 있습니다 codepen? 일반 데이터 바인딩이 작동해야하지만 구현은 어디에 있습니까? – 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>

는에 또한 그것을 참조 http://codepen.io/daKmoR/pen/pPKJxN?editors=1000

출처

2017-05-14 17:25:47 daKmoR

괜찮 았지만이 "disabled"를 JS 변수에 반영하는 방법은 무엇입니까? 이 예제에서 읽을 수있는 것은 에서 사용할 수 없으며 CSS에서 사용하지만 JS에서는 비활성화 된 값을 읽는 방법을 알고 있습니까? –

아, JS 변수가 "someWord"이고 html이 "some-word"일 때 모든 것이 잘 작동하지만 변수가 단일 단어이면 작동하지 않습니다. 이 예에서 –

당신은 쉽게 당신이 진정한 반환하는 this.disabled'/ 거짓 "외부"를 기 사용할 수있는'사용 만 할 수 connectedCallback 클래스 내에서 (예를 들어)를 을 할 수 'document.getElementsByTagName ('내 - 엘 ') [0] .disabled'는 true를 반환합니다. 'document.getElementsByTagName ('my-el ') [1] .disabled' 거짓을 반환합니다. 또한 getAttribute ('disabled ' "(빈 문자열) (설정된 경우) 또는 그렇지 않으면 null – daKmoR

Polymer 2.0 데이터 바인딩 - html 속성에서 Polymer 클래스로

답변

관련 문제