Polymer 2 computed binding with nested functions in dom-repeat

Question

I am using vaadin-grid to create a table dynamically (including the number of columns!) like this

<vaadin-grid id="grid" style="flex:1" items="[[tableData]]">  
    <template is="dom-repeat" items="[[tableColumns]]" as="column">
        <vaadin-grid-column>
            <template class="header">                                  
                [[column.header]]                                                                                                           
           </template>
            <template>
                <!--[[formatNumberForTable(get(column.value, item))]]--> ***
                [[get(column.value, item)]]
            </template>
        </vaadin-grid-column>
    </template>  
</vaadin-grid> 

tableColumns gets filled at runtime and determines the number of columns and their headers. To dynamically determine which property of item to display in the individual columns, I was advised to use get(column.value, item) where column.value gets dynamically filled with the name of the according property. This works well.

The problem is that I also would like to format the value. But code like the line marked with *** does not work, it prints out the source code instead of the value.

How can I format my values?

Answer 1

You can't have callback functions in your HTML code.

<!--[[formatNumberForTable(get(column.value, item))]]--> ***

Let formatNumberForTable instead call the get method inside itself.

[[formatNumberForTable(column.value, item)]]

formatNumberForTable: function(column.value, item) {
  var variable = this.get(column.value, item);

  // do something more with 'variable'

  return variable;
}