Boole yazımlı değerler olarak Polimer özel öğe öznitelikleri

Question

Demo A çalışırken, Demo B gibi çalışıp çalışamayacağını anlamak isterim. Temel olarak, özel öğe için boolean türü olarak happyFlag özniteliğini çözümlemek için.

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

Polimer ipuçlarına, bir özniteliğin ne tür girdisi olduğuna dair ipuçları verebilirsiniz. Oluşturulan yönteme Polymer komut dosyasını ve özellikle de this.happyFlag = false eklediğim aşağıdaki örneğe bakın. Bu satır, Polimer'e, bu değerin bir boole olarak algılanması gerektiğine dair bir ipucu verir. İpucu türleri hakkında bkz 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>