Question

我在模板中有一个简单的dom-if：

<div>
        <template is="dom-if" if="{{checkListEmpty()}}" restamp>
                <paper-button raised class="init" on-tap="initialize">Initialize</paper-button>
        </template>
</div>

以及显示或隐藏的功能。

checkListEmpty() {
    return this.todos.length == 0;
}

它仅适用于第一次。如果this.todos.length变为1，则模板不会消失。当条件为假时我该如何隐藏。

Answer 1

您的函数没有绑定工作，因为没有要绑定的属性。要使其工作，您应该在参数checkListEmpty(foo)中添加一个属性。就像那样，每次属性foo改变时，都会执行该功能。但是，如果此属性的内容发生更改（内容已推送），则数组作为属性将不起作用，除非这是替换的全局数组属性：

var bar = [], foo = ["ggg"];
bar = foo;

在这种情况下，函数将被调用，但它并不好。

无论如何，对于您的问题，您可以使用paper-button的隐藏属性或使用表长度绑定DOM-IF。

<template is="dom-if" if="[[!bar.length]]" restamp>
  <paper-button raised on-tap="addBar">Initialize</paper-button>
</template>

或

<paper-button raised on-tap="addBar" hidden="[[bar.length]]">Initialize</paper-button>

然后每次将属性添加到数组中或删除属性，直到其中没有任何内容，您的按钮将被显示或不显示。

你可以看到一个正常工作的jsfiddle（虽然使用chrome并且耐心等待初始化..如果它不起作用，请在这里评论）

聚合物dom-if不重新检查条件

1 个答案: