Why do Polymer computed properties need explicit property arguments?

Question

I was looking a bit for Polymer 1.0 elements, and I'm a little curious to figure out the 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 paper-drawer-panel property, so why is it so important to explicitly include it in the parameters of the computed property?

Is an

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

Is this a bad practice?

Answer 1

The explicit arguments in the calculated bindings serve an important purpose: specifying the Polymer on which the properties that the binding is calculated depend on. This allows Polymer to know when to recalculate and update the calculated snap.

Take [[_computeDrawerStyle()]] for example. In this case, Polymer has no idea on what other properties the calculated binding is calculated, and will only calculate once at boot time.

As soon as you explicitly add drawerWidth ( [[_computeDrawerStyle(drawerWidth)]] ), Polymer now knows that it must re-run the computed binding for the new value each time drawerWidth changes.

Answer 2

I think you are confused. What do you mean in the code example here style$="[[_computeDrawerStyle(drawerWidth)]]" is a call to a private function called _computeDrawerStyle, and, of course, you need to explicitly specify the correct parameters for it. Check the documentation here to find out about the computed properties.

Answer 3

The polymer has two separate concepts, and you confuse them.

• The calculated properties. These are properties that depend on others and are recalculated whenever their components change. You can then bind the value of this calculated property as the value of the property. <paper-draw-panel> does NOT have a computed property (I checked the code).

• Functional calls referenced by data binding (which is _computeDrawStyle ). This leads to the fact that Polymer calls this function (element) when its parameters ever change. Parameters - all properties (or you can use sub-options of objects and array indices). This is what happens here.