在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>
您可以给Polymer提示有关属性是什么类型的输入。请参见下面的示例,其中添加了Polymer脚本,特别是this.happyFlag = false
在创建的方法中。该行向Polymer提示此值应视为布尔值。有关提示类型,请参见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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句