Polymer 2.0 数据绑定 - 从 html 属性到 Polymer 类答案

【问题标题】：Polymer 2.0 Data Binding - from html property to Polymer classPolymer 2.0 数据绑定 - 从 html 属性到 Polymer 类
【发布时间】：2017-05-15 01:25:47
【问题描述】：

我想拥有与 Polymer paper-elements 下拉菜单相同的功能，但已禁用。

下拉菜单代码：

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

问题是如果 disabled 参数在<my-element tag> 中，如何将 this.disabled = true 传递给 Polymer 类？

那么当我有<my-element disabled> this.disabled=true 和<my element nothing there> this.disabled=false 时？

【问题讨论】：

你能用更新代码吗？常规数据绑定应该可以工作，但实施取决于的位置

标签： javascript polymer polymer-2.x

【解决方案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

【讨论】：

这个没问题，但是如何将这个“禁用”反映到 JS 变量中呢？我知道在这个例子中我们可以读取中的 disable 并在 CSS 中使用，但是如何在 JS 中读取 disabled 的值？
哦，当 JS 变量为“someWord”并且在 html 中为“some-word”时，一切正常，但当变量为单个单词时，它就无法工作 - 知道怎么做吗？
在这个例子中你可以很容易地在类里面做（例如）connectedCallback你可以使用this.disabled这将在“外部”返回真/假你可以使用document.getElementsByTagName('my-el')[0].disabled这将返回真@987654325 @ 将返回 false 您也可以执行 getAttribute('disabled') 如果设置则返回 "" （空字符串），否则返回 null