聚合物dom-if不重新檢查情況

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使用hidden屬性，也可以將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，請耐心等待初始化。如果不起作用，請在此處評論）