2

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

動作例(2 つのボックスをクリックすると、左側のボックスのみが動作します)

4

2 に答える 2

3

現在、ダッシュ属性をキャメル ケースに変換することはサポートされていません。 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

于 2014-04-13T15:41:51.187 に答える
1

Polymer 1.0 では、破線の属性を camelCased プロパティに変換することがデフォルトの動作になりました。

于 2015-06-03T13:43:06.650 に答える