聚合物等同于 ng-show？

Question

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>

Answer 1

我想您可以使用 dom-if 有条件地在 DOM 树中保留必需的 HTML。 properties 应该在组件的 properties 中定义。

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

Answer 2

dom-if 这里不需要。只需使用 $=（属性绑定）到 add/remove 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 决定您不想呈现的代码块，而不仅仅是隐藏。

Answer 3

在模板中添加模板后，True 和 False 将起作用。我试过了

   <template>
    <template is="dom-if" if="{{authenticated}}">
        {{authenticated}}
        <p>The ID is {{controller.greeting.id}}</p>
        <p>The content is {{controller.greeting.content}}</p>
     </template>

    <template is="dom-if" if="{{!authenticated}}">
        {{authenticated}}
        <p>Login to see your greeting</p>
     </template>
    </template>

如果您不在模板中添加模板 True，false 将永远不起作用。无论您的属性值为 True 还是 False，它都会始终向您显示第一个模板。

希望有用。

聚合物等同于 ng-show？

Polymer equivalent to ng-show?

angularjs

polymer

polymer-1.0