为什么 Polymer 的计算属性需要明确的属性参数？

Question

我正在深入研究 Polymer 1.0 元素，我对计算属性有点好奇。

例如，在paper-drawer-panel.html,

<dom-module id="paper-drawer-panel" …>
  …
  <div id="main" style$="[[_computeDrawerStyle(drawerWidth)]]">
    …
  </div>
  …
</dom-module>
<script>
Polymer({
  is: 'paper-drawer-panel',
  …
  _computeDrawerStyle: function(drawerWidth) {
    return 'width:' + drawerWidth + ';';
  },
  …
</script>

drawerWidth 是 paper-drawer-panel 的属性，那么为什么将它显式包含在计算的属性的参数中如此重要？

是

[[_computeDrawerStyle()]]

…

_computeDrawerStyle: function () {
  return 'width:' + this.drawerWidth + ';';
}

这是不好的做法吗？

Answer 1

计算绑定中的显式参数有一个重要用途：告诉 Polymer 计算绑定依赖于哪些属性。这允许 Polymer 知道何时重新计算和更新计算绑定。

以[[_computeDrawerStyle()]]为例。在这种情况下，Polymer 不知道计算绑定依赖于哪些其他属性，并且只会在加载时计算一次。

一旦您显式添加 drawerWidth ([[_computeDrawerStyle(drawerWidth)]])，Polymer 现在知道它应该运行每次 drawerWidth 更改时重新计算绑定以获得新值.

Answer 2

我觉得你很困惑。您在此处 style$="[[_computeDrawerStyle(drawerWidth)]]" 的代码示例中所指的是对名为 _computeDrawerStyle 的私有函数的调用，当然您需要明确为其提供正确的参数。查看文档 here 以了解计算属性。

Answer 3

Polymer 有两个独立的概念，你混淆了它们。

计算属性。这些是依赖于其他属性的属性，只要它们的组件发生变化就会重新计算。然后，您可以将计算出的属性的值数据绑定为属性值。 <paper-draw-panel> 没有计算出的属性（我检查了代码）。
数据绑定中引用的函数调用（这就是 _computeDrawStyle）。这会导致 Polymer 在其任何参数发生变化时调用（元素的）该函数。参数都是属性（或者你可以使用对象的子属性和数组的索引）这就是这里发生的事情。

为什么 Polymer 的计算属性需要明确的属性参数？

Why do Polymer's computed properties need explicit property arguments?

polymer

polymer-1.0

为什么 Polymer 的计算属性需要明确的 属性 参数？

Why do Polymer's computed properties need explicit property arguments?

polymer

polymer-1.0

为什么 Polymer 的计算属性需要明确的属性参数？