Question

我有一个自定义元素<x-marker>，里面有<paper-checkbox>。

我想在我的元素上使用checked属性来反映<paper-checkbox>，但我的解决方案似乎不是这样做的。

HTML：

<x-marker is-checked="<%= someBoolean %>"></x-marker>

元素：

<dom-module id="x-marker">

  <template>
    <div>
      <paper-checkbox id="checkbox"></paper-checkbox>
    </div>
  </template>

  <script>
    Polymer({
      is: 'x-marker',

      properties: {
        isChecked: String
      },

      listeners: {
        change: 'changeHandler'
      },

      attached: function() {
        if (this.isChecked === 'true') {
          this.$.checkbox.setAttribute('checked', this.isChecked);
        }
      },

      changeHandler: function (event, detail, sender) {
        //...
      }
    });
  </script>

</dom-module>

在Polymer 0.5中你可以使用checked?="{{isChecked}}"，但这似乎不再适用于1.0。只要属性存在，硬编码<paper-checkbox checked="false">仍然检查复选框。这个值似乎并不重要，这就是为什么必须绑定属性本身，而不是它的值。

我似乎无法解决这个问题，包括将属性视为字符串=== 'true'而不是布尔值，并将其直接绑定到<paper-checkbox>

Answer 1

在1.0中你只需要使用checked="{{isChecked}}"。您可以按如下方式实现它：

HTML：

<x-marker checked="{{someBoolean}}"></x-marker>

元素：

<dom-module id="x-marker">

  <template>
    <div>
      <paper-checkbox id="checkbox" checked="{{checked}}">Check me</paper-checkbox>
    </div>
  </template>

  <script>
    Polymer({
      is: 'x-marker',

      properties: {
        checked: {
          type: Boolean,
          observer: '_checkChanged'
        }
      },

      _checkChanged: function(newValue, oldValue) {
        // Do something
      }

    });
  </script>

</dom-module>

将Polymer的HTML属性传递给嵌套组件

1 个答案: