Polymer 1.0 布尔值 属性 默认值设置为 true

Question

我有一个 Polymer 1.0 自定义元素，它有一个 属性 类型的布尔值，默认值设置为 true：

    myProperty: {
        type: Boolean,
        value: true
    }

在我的单元测试中，我实例化了这个自定义元素，并将 my-属性 设置为 false:

<my-custom-element id="myElem" my-property="false"></my-custom-element>

 var elem = document.getElementById('myElem');

 test('it_should_set_myProperty_to_false', function () {
     assert.equal(elem.myProperty, false);
 })

单元测试失败。 elem.myProperty 实际上设置为 true，而我认为它是 false。这是为什么？

Answer 1

布尔属性 has changed in Polymer 1.0 的行为现在遵循 HTML 布尔属性的规范。如果该属性存在于元素上（无论属性值如何），则 属性 设置为真，如果未指定该属性，则不会发生反序列化。因此，如果布尔值 属性 最初为真，则不能将其设置为假。

您只能将 属性 的默认值设置为 false

myProperty: {
   type: Boolean,
   value: false
}

然后设置属性使myProperty为真。

<my-element my-property></my-element>

该主题在 Polymer 项目的一些问题中进​​行了讨论，例如 here and here。

第二个问题还提到了使用 Object 类型的 属性 的解决方法。因为这些属性是用 JSON.parse 反序列化的，所以你可以用 my-property="false" 和 my-property="true".

指定一个布尔值