pass Polymer data binding through a Javascript function - dart

Question

I'm using Polymer and Dart to produce a list of point coordinates. It renders a list of points in html. Nevertheless I want to convert the points from one coordinate system to another using a javascript function.
In HTML dart-polymer:
<template repeat="{{ p in grid_points }}">
<core-item>{{ p }}</core-item>
</template>
The javascript I found in a library:
grid_to_geodetic(x, y);
grid_points is a List of Points. How can I pass p.x and p.y through the js function and get the result rendered in place of p in the HTML template?

Answer 1

You could use expression filter for that:
<template repeat="{{ p in grid_points }}">
<core-item>{{ p | grid_to_geodetic }}</core-item>
</template>
...
<script>
Polymer('your-element', {
grid_to_geodetic: function(point){
return point.x + point.y;
}
});
</script>
Filter takes one value and returns one, if you need to convert x and y separately you have to use an constant parameter to indicate which part of the point you want to convert, something like
<template repeat="{{ p in grid_points }}">
<core-item>{{ p | grid_to_geodetic(1) }}</core-item>
<core-item>{{ p | grid_to_geodetic(2) }}</core-item>
</template>
...
<script>
Polymer('your-element', {
grid_to_geodetic: function(point, part){
if(part == 1) return point.x;
else return point.y;
}
});
</script>

Answer 2

I did manage to invoke it thanks to some ideas from ain:
So with the expression filter you are telling the template to invoke a Dart function:
<template repeat="{{ p in start_points }}">
<core-item>{{ p | rt90_to_wgs84 }}</core-item>
</template>
Then in the Dart backing class you add a function with the same name as in the filter and you call a global js function with context.callMethod('funcion_name', [args_list]);:
rt90_to_wgs84(p) {
return context.callMethod('grid_to_geodetic', [p.x, p.y]);
}