2016-08-17 7 views
2

ポリマーはng-showに相当しますか?ここで私が変換しようとしている何のスニペットの例です:ng-showと同等のポリマー?

<h1>Greeting</h1> 
<div ng-show="authenticated"> 
    <p>The ID is {{controller.greeting.id}}</p> 
    <p>The content is {{controller.greeting.content}}</p> 
</div> 
<div ng-show="!authenticated"> 
    <p>Login to see your greeting</p> 
</div> 

答えて

2

dom-ifここでは必要ありません。単に$=(属性バインディング)を使用してhidden属性を追加/削除してください。

<style> 
[hidden] { 
    display:none; 
} 
</style> 

<h1>Greeting</h1> 
<div hidden$=[[!authenticated]]> 
    <p>The ID is {{controller.greeting.id}}</p> 
    <p>The content is {{controller.greeting.content}}</p> 
</div> 
<div hidden$=[[authenticated]]> 
    <p>Login to see your greeting</p> 
</div> 

使用dom-ifあなただけ隠されていない、レンダリングされないようにするコードのブロックについての決定をします。

1

私はあなたが条件付きでDOMツリーに必要なHTMLを維持するためにdom-ifを使うことができると思います。コンポーネントのpropertiespropertiesを定義する必要があります。

<template is="dom-if" if="{{authenticated}}"> 
    <p>The ID is {{controller.greeting.id}}</p> 
    <p>The content is {{controller.greeting.content}}</p> 
</template> 
<template is="dom-if" if="{{!authenticated}}"> 
    <p>Login to see your greeting</p> 
</template> 
+1

dom-ng-ifと同等です! –