如何将隐藏属性绑定到计算函数(Polymer 1.0)

Question

我试图将"隐藏"属性绑定到两个单独的布尔属性值的结果.例如,我想在!boolA ||时隐藏元素 boolB.

该模板包含:

<img src='...' hidden={{!src || isLoaded}}>

然后我定义属性:

Polymer({

  is: 'thingy-thing',

  properties: {
    src: {
      type: String
    },
    isLoaded: {
      type: Boolean,
      value: false
    }
  }
});

我知道我不能将这两者结合到同一个表达式中,所以我尝试使用计算属性,但我没有任何成功.似乎我还需要使用"reflectToAttribute",但我不理解它是如何工作的.我尝试了多种属性组合,但我可以使用某人指向正确的方向.

我最近的组合是以下属性:

hideSpinner: {
    type: Boolean,
    computed: 'computeHideSpinner(src,loaded)',
    reflectToAttribute: true
  }

我暴露了'computeHideSpinner'的函数,但是这个函数永远不会被执行(调试器行永远不会被命中).

computeHideSpinner: function(src, loaded) {
  debugger;
  return (!src || loaded);
}

Answer 1

要绑定到属性,请使用美元符号($).并且为了确保在变量更改时刷新绑定,请将观察到的变量包含为函数调用的参数.

另请注意,当单向绑定使用括号而不是大括号来提高性能时.

例如:

HTML:

<img src="source.jpg" hidden$="[[hideSpinner(src,loaded)]]">

聚合物脚本:

hideSpinner: function(src,loaded) {
  return (!src || loaded);
}

这是关于jsBin的一个工作示例