Question

嗨我有与刷新属性的刷新输出相关的问题。

假设我在特定情况下隐藏了部分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文档中得到了解答。

计算的绑定声明包括计算函数名称，后面是括号中的依赖项列表。

您的问题是计算出的函数被调用一次，但由于您没有提供参数，因此将来无法知道函数值何时会发生变化。您需要将属性作为依赖项包含在内，以便知道函数值何时可能发生变化。

例如：

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

因此你需要声明一个属性

Polymer({
    is: 'my-element',

    properties: {
        deviceId: String
    },

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

如果查看其他聚合物元素，他们通常会调用函数_isHidden而不是hideElement来表示它将采用True / False值。

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

Answer 2

问题是hidden属性不会再次调用hideElement，因此hidden的值永远不会更改。

您应该将hidden绑定到布尔值，然后更改该布尔值。这样，每当布尔属性更改hidden的值时，也会更改

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

和javascript会像

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

聚合物计算的函数刷新值

2 个答案: