Chciałem połączyć tag <google-map> z moim <geo-location>, miało to wyglądać tak:
<geo-location id="loc" lat="{{lat}}" lon="{{lon}}"></geo-location>
<google-map id="map" latitude="{{lat}}" longitude="{{lon}}" minZoom="1" maxZoom="30" fit></google-map>
Problem w tym, że to działa tylko wewnątrz <template>, czyli musiałem stworzyć swój nowy tag <my-map>:
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="google-map.html">
<link rel="import" href="geo-location.html">
<polymer-element name="my-map">
<template>
<geo-location id="loc" lat="{{lat}}" lon="{{lon}}"></geo-location>
<google-map id="map" latitude="{{lat}}" longitude="{{lon}}" minZoom="1" maxZoom="30" fit>
</google-map>
</template>
<script>
Polymer('my-map',{});
</script></polymer-element>
Przy okazji mój tag <geo-location> wygląda tak:
<link rel="import" href="bower_components/polymer/polymer.html">
<polymer-element name="geo-location" attributes="lat lon">
<template>
<style>
:host {
display: none;
}
</style>
</template>
<script>
Polymer('geo-location', {
lat: 0.0,
lon: 0.0,
created: function() {
var t = this;
function updatePosition(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
t.lat = lat;
t.lon = lon;
}
navigator.geolocation.getCurrentPosition(updatePosition);
}
});
</script>
</polymer-element>
Najpierw wskazuje, że ma dwa atrybut lat i lon, później zaś w momencie wywołania przez Polymera kodu dla eventu created pobiera lokalizację z navigatora i przerzuca ją do lat i lon obiektu.
Ta konieczność trzymania tego wszystkiego w oddzielnym tagu jest trochę niefajna.
Przyjemniej by było gdyby data binding działał także poza tagami.
[to całe moje zajmowanie się Polymerem wynika stąd, że obiecałem za 2 tygodnie zrobić o nim prezentację w pracy w ramach Technical Friday ;-)]
Podobne postybeta
Najkrótsza droga do przyszłości - Polymer ;-)
Polymeryzacja AngularJS ;-)
"Kodowanie" na Chrome OS ;-)
Lepszy test mniejszy i dokładniejszy, niż większy i ogólniejszy ;-)
Z NMEA do KML (chyba najbardziej kryptyczny tytuł postu jak stworzyłem ;-))