5

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

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

<dom-module id="paper-drawer-panel" …&gt;
  …
  <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 + ';';
}

这是不好的做法吗？

4

3 回答 3

10

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

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

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

于 2015-06-04T17:20:21.973 回答
0

Polymer 有两个独立的概念，您会混淆它们。

  1. 计算属性。这些属性依赖于其他属性，并且在其组件更改时重新计算。然后，您可以将该计算属性的值数据绑定为属性值。<paper-draw-panel>没有计算属性（我检查了代码）。

  2. 数据绑定中引用的函数调用（这是什么_computeDrawStyle）是。这会导致 Polymer 在其任何参数更改时调用（元素的）该函数。参数都是属性（或者您可以使用对象的子属性和数组的索引）这就是这里发生的事情。

于 2016-10-09T07:55:48.363 回答
0

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

于 2015-08-12T17:22:20.770 回答