Polymer Dart, global variables and data bindings (observable) -

i read polymer api developer guide, unfortunately has examples javascript developers. examples try port dart, in case fail. please, go https://www.polymer-project.org/0.5/docs/polymer/polymer.html#global (section supporting global variables). here clip documentation:

elements.html

<polymer-element name="app-globals">   <script>     (function() {       var values = {};        polymer({        ready: function() {          this.values = values;          (var = 0; < this.attributes.length; ++i) {            var attr = this.attributes[i];            values[attr.nodename] = attr.value;          }        }       });     })();   </script> </polymer-element>  <polymer-element name="my-component">   <template>     <app-globals id="globals"></app-globals>     <div id="firstname">{{$.globals.values.firstname}}</div>     <div id="lastname">{{$.globals.values.lastname}}</div>   </template>   <script>     polymer({       ready: function() {         console.log('last name: ' + this.$.globals.values.lastname);       }     });   </script> </polymer-element> 

index.html

<app-globals id="globals" firstname="addy" lastname="osmani"></app-globals> 

questions:

• how implement code in dart?
• reading code of different q&a concerning dart polymer usage come across @observable annotation, toobserve() function , class customelement extends polymerelement observable {..}. know somehow related data bindings, have no idea how.

app_gobals.html

<link rel="import" href="packages/polymer/polymer.html">  <polymer-element name="app-globals">   <template>     <style>       :host {         display: none;       }     </style>   </template>   <script type="application/dart" src="app_globals.dart"></script> </polymer-element> 

app_gobals.dart

import 'package:polymer/polymer.dart'; import 'dart:async' show timer;  @customtag('app-globals') class appglobals extends polymerelement {   static final observablemap _staticvalues = toobservable({});    map values => _staticvalues;    appglobals.created() : super.created();    ready() {     attributes.keys.foreach((k) {       values[k] = attributes[k];     });      // demonstrate value changes reflected     // in view     new timer.periodic(new duration(seconds: 2),         (_) => values['periodic'] = new datetime.now());   } } 

app_element.html (your my-component)

<link rel="import" href="packages/polymer/polymer.html"> <link rel="import" href="app_globals.html"> <polymer-element name="app-element">   <template>     <style>       :host {         display: block;       }     </style>     <app-globals id="globals"></app-globals>     <div>{{$["globals"].values["firstname"]}}</div>     <div>{{$["globals"].values["lastname"]}}</div>     <div>{{$["globals"].values["periodic"]}}</div>   </template>   <script type="application/dart" src="app_element.dart"></script> </polymer-element> 

app_element.dart

import 'package:polymer/polymer.dart';

@customtag('app-element') class appelement extends polymerelement {   appelement.created() : super.created();    ready() {     print('last name: ${$["globals"].values["lastname"]}');   } } 

@observable indicates polymer should notified when value changes can update view. if have collection not enough because polymer gets notified when field changes (another collection or null assigned). toobservable(list|map) ensures polymer gets notified when elements in collection changed (removed/added/replaced). polymerelement includes observable there fore there nothing special on class level. when extend dom element looks bit different see https://stackoverflow.com/a/20383102/217408.

update
lot of questions. use static final observablemap _staticvalues = toobservable({}); ensure values stored in 1 place no matter how many <app-globals> elements application contains. statics stored in class not in instance therefore doesn't matter how many instances exist. @computedproperty(expression) var somefield; watches expression value changes , notifies polymer update bindings somefield. @observable simpler version works fields. @published @observable in addition allows bindings field outside element. @publishedproperty() same @published annotation form allows pass arguments. @publishedproperty(reflect: true) @published in addition updates actual dom attribute make bound value available not other polymer elements bind css or other frameworks have no knowledge how bind polymer fields.