polymer - 为什么 Polymer 的计算属性需要显式的属性参数？

Question

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

例如，在 纸抽屉面板.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

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

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

只要您添加drawerWidth显式([[_computeDrawerStyle(drawerWidth)]])Polymer 现在知道它应该在每次 drawerWidth 时再次运行计算绑定(bind)以获得新值。变化。