Question

我可以使用以下html制作Polymer复选框：

<polymer-element name="role-checkbox1" attributes="ariachecked" on-click="{{clickHandler}}">
    <template>
        <style>
            :host::after {
                font-size: 100px;
                display: inline-block;
                border: 1px solid black;
                content: '+';
                width: 1em;
                height: 1em;
            }
            :host[ariachecked]::after {
                content: 'x';
            }
        </style>
    </template>
    <script>
    Polymer('role-checkbox1', {
        ariachecked: false,
        clickHandler: function() {
            this.ariachecked = !this.ariachecked;
        }
    });
    </script>
</polymer-element>

以下内容完全相同，只是 ariachecked 现在 aria-checked 而 role-checkbox1 不是role-checkbox2。这似乎不起作用。有没有办法可以使用 aria-checked 属性？我可以将此属性绑定到另一个命名属性吗？

<polymer-element name="role-checkbox2" attributes="aria-checked" on-click="{{clickHandler}}">
    <template>
        <style>
            :host::after {
                font-size: 100px;
                display: inline-block;
                border: 1px solid black;
                content: '+';
                width: 1em;
                height: 1em;
            }
            :host[aria-checked]::after {
                content: 'x';
            }
        </style>
    </template>
    <script>
    Polymer('role-checkbox2', {
        'aria-checked': false,
        clickHandler: function() {
            this['aria-checked'] = !this['aria-checked'];
        }
    });
    </script>
</polymer-element>

Working Example（点击两个方框，只有左边的方框正常工作）

Answer 1

目前不支持将虚线属性转换为驼峰大小写。 https://github.com/Polymer/polymer/issues/193#issuecomment-40162114

看起来你已经找到了Github线程：）

我认为你需要做一些像这样的事情：

<polymer-element name="role-checkbox1" attributes="checked" on-click="{{clickHandler}}">
  <template>
    :host[checked]::after {
      content:'x';
    }
    </style>
  </template>
  <script>
  Polymer('role-checkbox1', {
    checked: false,
    clickHandler: function() {
      this.checked = !this.checked;
      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
    }
  });
  </script>
</polymer-element>

http://jsbin.com/dukeq/3/edit

Answer 2

使用聚合物1.0，现在将虚线属性转换为camelCased属性是默认行为。

Polymer中是否支持带破折号的属性和属性？

2 个答案: