Passing a function to an element for the element to use

[brett bronson]

Hello,

I have a custom element that I need to pass a function to for formatting a value differently depending how it is being used. I am trying to do the following:

<my-element field="date" formatter="[[dateFormatter]]"></my-element>

where dateFormatter is defined on a parent element that creates the <my-element> instances, accessible from the parent element using this.dateFormatter.

My assumption was that when I call:

Polymer.dom(this.root).querySelector("my-element").getValue(new Date()); 

my-element would run the date instance through it's this.formatter function that I had specified. 

Internally in my-element, I am doing the following in getValue():

[ ... ]

getValue: function(value) {

  if ("formatter" in this) {

    return this.formatter(value);

  }

  return value;

}

[ ... ]

However this.formatter is always undefined. 

I realize that the allowed property types are Boolean, Date, Number, String, Array or Object, though I see Function used successfully in dom-repeat:

https://github.com/Polymer/polymer/blob/edb59eb6283074ce54f374b30b884c9f9fcf9f5f/src/lib/template/dom-repeat.html#L168

and also in this project which is doing similar to format values:

https://github.com/David-Mulder/paper-datatable/blob/master/paper-datatable-column.html#L187

 - where the formatValue function is defined: https://github.com/David-Mulder/paper-datatable/blob/master/demo/paper-datatable/filter.html#L86

Is there something I'm missing? Is there a better way of doing this? This element will be reused all over our webapp, so it's impossible for me to know exactly how these values will be formatted. 

Thanks

[b...@sfi.ca]

in  https://github.com/David-Mulder/paper-datatable/blob/master/demo/paper-datatable/filter.html#L49  the binding is using {{ }}  but your code is using [ ]  

have you tried changing to {{ }}  ?

[brett bronson]

I was able to get an answer from the Polymer slack community. My issue is that the code I was referencing was using Polymer 2x, whereas I'm using Polymer 1.6.1. In 1.x, creating a binding using foo="[[bar]]" automatically assumes that bar is a property of the current element, whereas in 2x, bar could either be a property or a function. In 1x, to do what I need to do, I have to define a property that returns similar:

foo: {
   type: Function,
   value: function() {
      return function(value) {
         // do something with value here and return it