【问题标题】：Polymer 1.x: How to data bind to a variable boolean attribute?Polymer 1.x：如何将数据绑定到变量布尔属性？
【发布时间】：2016-02-26 07:31:50
【问题描述】：

问题

如何将变量绑定到/作为<paper-checkbox> 元素的disabled 属性？

根据我的代码结果，似乎切换disabled 属性的唯一方法是将disabled 属性作为字符串 包含在开始标签。肯定有办法将其切换为变量吗？

Link to JSBin

http://jsbin.com/zecidojizu/edit?html，输出

<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz/">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="all-elements.html">
</head>
<body>
<x-element></x-element>
<dom-module id="x-element">
  <template>
    <style>
      paper-checkbox {
        display: block;
        margin-bottom: 30px;
      }
    </style>
    <paper-checkbox                  >A</paper-checkbox>
    <paper-checkbox  disabled        >B</paper-checkbox>
    <paper-checkbox xdisabled        >C</paper-checkbox>
    <paper-checkbox  disabled=true   >D</paper-checkbox>
    <paper-checkbox  disabled="true" >E</paper-checkbox>
    <paper-checkbox  disabled=false  >F</paper-checkbox>
    <paper-checkbox  disabled="false">G</paper-checkbox>
    <paper-checkbox  [[bool]]        >H</paper-checkbox>
    <paper-checkbox "[[bool]]"       >I</paper-checkbox>
    <paper-checkbox  {{bool}}        >J</paper-checkbox>
    <paper-checkbox "{{bool}}"       >K</paper-checkbox>
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element',
        properties: {
          bool: {
            type: String,
            value: 'disabled'
          }
        }
      });
    })();
  </script>
</dom-module>
</body>
</html>

【问题讨论】：

您可以为您的bool 属性设置reflectToAttribute 属性（对于Polymer 0.5 中的已发布属性，该属性以前是reflect）为true，以自动对其值进行任何更改序列化为同名的属性。管理属性值如何序列化的规则可以阅读here。

标签： html data-binding attributes polymer polymer-1.0

【解决方案1】：

disabled 是原生 HTML 属性。要绑定到原生属性，您必须使用$= 而不是=。

<paper-checkbox disabled$="{{isDisabled}}">Foo</paper-checkbox>

【讨论】：

对于纸质复选框，它也是一个属性。所以接受的解决方案是正确的。

【解决方案2】：

您需要像这样绑定属性：disabled=[[bool]]。这相当于调用element.disabled = bool，其中元素是纸质复选框的某个实例。

有关示例，请参阅 this forked JSBin。

基本上，如果该属性存在，则 Boolean HTMLAttribute 将为 true，如果不存在，则为 false。所以对于：

<paper-checkbox disabled="[[isDisabled]]"></paper-checkbox>

输出的 HTML 将如下所示：

<paper-checkbox disabled></paper-checkbox>

当isDisabled 是true，看起来像这样：

<paper-checkbox></paper-checkbox>

当isDisabled 为假时。

这就是设置的原因

<paper-checkbox disabled="false"></paper-checkbox>

仍然会禁用复选框。

见Polymer's Documentation on Attribute Deserialization最后一段

【讨论】：

虽然这可能有效，但这不是正确的答案。 Ben Davis（完整示例）和 Westbrock（第一个正确答案）有正确答案。
@ktiedt：我同意这个答案在技术上并不正确。但是，我接受了它，因为 1. 在我接受它的时候，它是 only 的答案。 2. 有效。 3.最重要的是，它包含一个JSBin！（其他两个答案没有。）...未来的读者，使用当前投票最高的答案：<paper-checkbox disabled$="{{isDisabled}}">Foo</paper-checkbox>
@ktiedt @mowzer paper-checkbox 无关紧要，因为它是自定义元素的属性。我同意一般 $= 应该用于原生 HTML 属性，尽管在我看来 disabled 是安全的（如果我错了，请纠正我）任何可以禁用的 HTML 元素都具有布尔值 disabled 属性所以可以使用=安全绑定

【解决方案3】：

你没有漏掉disabled$={{Boolean}}吗？

【讨论】：