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>