Question

我正试图绑定一个隐藏的＆＃39;属性为两个单独的布尔属性值的结果。例如，我想在！boolA ||时隐藏元素boolB。

模板包含：

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

然后我定义属性：

Polymer({

  is: 'thingy-thing',

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

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

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

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

我暴露了＆＃39; computeHideSpinner＆＃39;的函数，但是这个函数永远不会执行（调试器行永远不会被命中）。

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);
}

此处a working example on jsBin

Answer 2

属性绑定的正确语法包含$字符（docs）。

<img src='...' hidden$={{hideSpinner}}>

Answer 3

好的，我明白了。我认为它会把它扔出去，这可能会帮助其他人。我的函数从未运行，因为我的一个值有一个未定义的值。从文档：＆＃34;在定义所有相关属性（！=未定义）之前，不会调用计算函数。因此，每个依赖属性应该具有在属性中定义的默认值（或者以其他方式初始化为非未定义的值）以确保计算函数值。＆＃34;我的解决方案是将src默认为空字符串。

最重要的是，我还有一些凯文和玛丽亚能够提供帮助的问题。

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

3 个答案: