Polymer 聚合物自定义元素属性作为布尔类型值

虽然

Demo A

可以工作，但我想了解是否可以使它像

Demo B

那样工作。基本上，要使自定义元素将

happyFlag

属性解析为布尔类型，请执行以下操作

// Demo A - works. bob smiles. cat frowns.
<x-smiley name="Bob" happyFlag="true"></x-smiley>
<x-smiley name="Cat" happyFlag="false"></x-smiley>
<polymer-element name="x-smiley" attributes="name, happyFlag" noscript>
    <template>
        {{name}} is
        <span hidden?="{{happyFlag == 'true'}}">:-)</span>
        <span hidden?="{{happyFlag == 'false'}}">:-(</span>
        <hr>
    </template>
</polymer-element>

// Demo B - does not work (span always hidden)
<x-smiley name="Bob" happyFlag="true"></x-smiley>
<x-smiley name="Cat" happyFlag="false"></x-smiley>
<polymer-element name="x-smiley" attributes="name, happyFlag" noscript>
    <template>
        {{name}} is
        <span hidden?="{{happyFlag}}">:-)</span>
        <span hidden?="{{happyFlag}}">:-(</span>
        <hr>
    </template>
</polymer-element>

//演示A-works。鲍勃笑了。猫皱眉。
{{name}}是
:-)
:-(

//演示B-不工作（范围始终隐藏）
{{name}}是
:-)
:-(

您可以向Polymer提示属性的输入类型。请参阅下面的示例，我在其中添加了Polymer脚本，特别是在创建的方法中添加了

this.happyFlag=false

。此行向Polymer提示此值应被视为布尔值。请参阅关于提示类型

<polymer-element name="x-smiley" attributes="name, happyFlag">
<template>
    {{name}} is {{happyFlag}}
    <span hidden?="{{happyFlag}}">:-)</span>
    <span hidden?="{{happyFlag}}">:-(</span>
    <hr>
</template>
<script>
  Polymer('x-smiley', {
    created: function() {
        this.happyFlag = false;
    },
    ready: function() {
    }
  })
</script>

{{name}}是{{happyFlag}
:-)
:-(

聚合物（“x-smiley”{
已创建：函数（）{
this.happyFlag=false；
},
就绪：函数（）{
}
})

---

Fwiw，您不必在创建的

中设置属性，您只需将其放在原型上即可。这是真的。我最初在答案中有此项，但在阅读文档中有关使用原型的警告后更改了它。他们似乎只是警告不要在原型中设置对象或数组，所以我猜这是安全的这个特定示例的另一种方法。您还可以使用
publish:{happyFlag:true}
来设置其类型。