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

Question

I was digging a bit into the Polymer 1.0 elements and I am a little curious about the computed properties.

For example, in 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 is a property of paper-drawer-panel, so why is it so important to explicitly include it in the parameters of the computed property?

Is

[[_computeDrawerStyle()]]

…

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

Is this bad practice?

Buntline

Answer 1

Explicit arguments in computed bindings serve an important purpose: telling Polymer which properties the computed binding depends on. This allows Polymer to know when to recalculate and update the computed binding.

Take [[_computeDrawerStyle()]], for example. In this case, Polymer has no idea what other properties the computed binding depends on, and will only calculate it once on load.

As soon as you add drawerWidth explicitly ([[_computeDrawerStyle(drawerWidth)]]) Polymer now knows that it should run the computed binding again for a new value every time drawerWidth changes.

Selia

ahhh ok I get the picture. I just try to switch from an AngularJs application development trying to Polymerizing it. AngularJs uses a digest cycle, meaning that if something update in the scope, every computed expressions are evaluating again, so the view get updated, well .. even if the expression's parts didn't vary. I guess the Polymer way is more smart and better in terms of performance. – Buntline

_computeDrawerStyle is not a computed property, it is a private function call. – Brittnee

Answer 2

I think you are confused. What you are referring to in your code example here style$="[[_computeDrawerStyle(drawerWidth)]]" is a call to a private function called _computeDrawerStyle and of course you need to explicitly give it the right parameters. Check the documentation here to learn about computed properties.

Brittnee

Answer 3

Polymer has two separate concepts and you are confusing them.

1. Computed properties. These are properties that depend on other ones and are recalculated whenever their components changed. You can then databind the value of that computed property as a property value. <paper-draw-panel> does NOT have a computed property (I checked the code).

2. Function calls referenced in the databinding (which is what _computeDrawStyle) is. This causes Polymer to call that function (of the element) when ever any of its parameters changed. The parameters are all properties (or you can use subproperties of objects and indexes of arrays) This is what is happening here.

Hypnology