0

我在模板中有一个简单的 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，则模板不会消失。当条件为假时，我该如何隐藏。

4

1 回答 1

0

没有绑定适用于您的函数，因为没有要绑定的属性。要使其工作，您应该在参数中添加一个属性：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 并耐心等待初始化。如果它不起作用，请在此处评论）

于 2017-10-26T16:37:24.463 回答