javascript - polymer 计算函数刷新值

Question

您好，我有一个与刷新函数输出相关的问题，该函数被用作绑定(bind)到一个属性。

假设我有部分 html 想在特定情况下隐藏:

<div hidden$="[[hideElement()]]">

函数被定义为 Polymer 对象:

  hideElement: function () {
      if (this.deviceId == undefined) {
          return false;
      }
      else if (typeof this.deviceId === 'string' || this.deviceId instanceof String) {
          return true;
      }
      else {
          return false;
      }
  },

我看到的是，在此函数的输出发生变化后，元素并未隐藏。

我可能错过了什么，但我不确定是什么。

Answer 1

这在 Polymer Data binding 中得到了回答文档。

The computed binding declaration includes a computing function name, followed by a list of dependencies, in parenthesis.

您的问题是计算函数被调用一次，但它无法知道将来函数值何时会更改，因为您没有为它提供任何参数。您需要包含一个属性作为依赖项，以便它知道您的函数值何时可能会更改。

例如:

 <div hidden$="[[hideElement(deviceId)]]"></div>

因此你需要声明一个属性

Polymer({
    is: 'my-element',

    properties: {
        deviceId: String
    },

    hideElement: function(deviceId) {
        return deviceId ? true : false;
    }
})

如果您查看其他 polymer 元素，它们通常调用函数 _isHidden 而不是 hideElement 来指示它将采用 True/False 值。

由于我们已将 deviceId 声明为字符串，这将显着简化您的 hideElement 函数。 ""、null 和 undefined 都计算为 false。