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

Ste*_*ith 6 javascript polymer polymer-1.0

我有一个Polymer 1.0自定义元素,它具有boolean类型的属性,默认值设置为true:

    myProperty: {
        type: Boolean,
        value: true
    }
Run Code Online (Sandbox Code Playgroud)

在我的单元测试中,我将my-property设置为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);
 })
Run Code Online (Sandbox Code Playgroud)

单元测试失败了.elem.myProperty当我希望它是假的时,实际上设置为true.为什么是这样?

Dir*_*orf 13

布尔值属性的行为在Polymer 1.0中已更改,现在遵循HTML布尔属性的规范.如果元素上存在属性(无论属性值如何),则该属性设置为true,如果未指定属性,则不会发生反序列化.因此,如果最初为true,则无法将布尔属性设置为false.

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

myProperty: {
   type: Boolean,
   value: false
}
Run Code Online (Sandbox Code Playgroud)

然后将该属性设置为myPropertytrue.

<my-element my-property></my-element>
Run Code Online (Sandbox Code Playgroud)

在Polymer项目的一些问题中讨论了该主题,例如此处此处.

第二个问题还提到了使用类型属性的变通方法Object.因为这些属性是反序列化的,JSON.parse所以可以用my-property="false"和指定一个布尔值my-property="true".