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

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 与 table 长度绑定。

<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-如果不重新检查条件

polymer dom-if does not re check the condition

dom-if

polymer-2.x