Polymer自定义元素属性为布尔类型的值

Question

虽然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> 

Answer 1

您可以给出有关属性的输入类型的聚合提示。请参阅以下示例，其中我添加了Polymer脚本，特别是在创建的方法中添加了this.happyFlag = false。这一行给聚合物一个暗示，这个值应该被视为一个布尔值。有关提示类型，请参阅Polymer's Documentation。

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