Question

我使用Polymer和Dart生成点坐标列表。它在html中呈现一个点列表。不过我想用javascript函数将点从一个坐标系转换成另一个坐标系。

在HTML dart-polymer中：

<template repeat="{{ p in grid_points }}">
    <core-item>{{ p }}</core-item>
</template>

我在图书馆找到的javascript：

grid_to_geodetic(x, y);

grid_points是一个积分列表。如何通过js函数传递p.x和p.y并在HTML模板中获取代替p的结果？

Answer 1

您可以使用expression filter：

<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>

过滤器获取一个值并返回一个，如果需要单独转换x和y，则必须使用常量参数来指示要转换的点的哪个部分，如

<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

由于来自ain的一些想法，我确实设法调用了它：

因此，使用表达式过滤器，您可以告诉模板调用 Dart 函数：

<template repeat="{{ p in start_points }}">
    <core-item>{{ p | rt90_to_wgs84 }}</core-item>
</template>

然后在Dart支持类中添加一个与过滤器中名称相同的函数，并使用context.callMethod('funcion_name', [args_list]);调用全局js函数：

rt90_to_wgs84(p) {
  return context.callMethod('grid_to_geodetic', [p.x, p.y]);
}

通过Javascript函数传递Polymer数据绑定

2 个答案: