Data binding w Polymerze jest oszukany ;-)

Bawię się Polymer'em od Google i bardzo mi się podoba, chociaż trochę mnie zawodzi.

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>

Gdzie {{lat}} i {{lon}} służyć miały do przekazania wyników z <geo-location> do <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>

Tylko po to by móc przerzucić mapę do lokalizacji w której się znajduje wyświetlający ją komputer.

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>

Działa bardzo prosto.
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 posty^beta
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 ;-))