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。只需使用$=（属性绑定）添加/删除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 2

我想您可以使用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 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？

3 个答案: