html - polymer 1.x : How to data bind to a variable boolean attribute?

标签 html data-binding attributes polymer polymer-1.0

问题

How do I bind a variable to/as the disabled attribute of a <paper-checkbox> element?

根据我的代码的结果,它看起来是切换 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>

最佳答案

disabled 是原生 HTML 属性。要绑定(bind)到 native 属性,您必须使用 $= 而不是 =

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

关于html - polymer 1.x : How to data bind to a variable boolean attribute?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33883824/

相关文章:

javascript - Nativescript UI-Builder 和数据绑定(bind)

wpf - 带有静态文本和绑定(bind)的标签

wpf - 强制传播值(value)

c - C 中矩阵的不同声明

jquery - 使用 jquery 更改数据属性

servlets - request.getAttribute() 无法获取 HTTP 请求参数

html - Thymeleaf:附加到 html 元素/避免重复迭代

PHP 使用 explode() 读取文本文件以获取文本的特定部分

javascript - 从弹出按钮中删除列表元素

html - 使用 DIV 的等效表布局