Polymer 2.0 数据绑定——从 html 属性到 Polymer class

Question

我想拥有与禁用的 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 = true 传递给 Polymer class?

所以当我有 <my-element disabled> this.disabled=true 并且如果 <my element nothing there> this.disabled=false?

Answer 1

使用具有布尔类型和 reflectToAttribute 的聚合物属性应该就可以了。

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

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

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

<body>

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


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

</body>
</html>

在 codepen 上也可以看到 http://codepen.io/daKmoR/pen/pPKJxN?editors=1000

Polymer 2.0 数据绑定——从 html 属性到 Polymer class

Polymer 2.0 Data Binding - from html property to Polymer class

javascript

polymer

polymer-2.x

Polymer 2.0 数据绑定——从 html 属性 到 Polymer class

Polymer 2.0 Data Binding - from html property to Polymer class

javascript

polymer

polymer-2.x

Polymer 2.0 数据绑定——从 html 属性到 Polymer class