Hi, I am trying to communicate between two polymer elements which are probably not typical bound in a "prent-child" relationship. Here is what I am trying to do (using scaffold):
I have one polymer element where I am binding a list of places (drawer) and the other one is the main which is holding a simple <google-map> element wrapped inside my custom element. My objective is to click on a place listed in drawer panel and pass the lat/lng values to the custom map element which would eventually be passed to latitude and longitude values of <google-map> so that it pans itself according to the latest values. I am reading https://www.polymer-project.org/articles/communication.html but somehow I am getting lost somewhere. Below are my elements: 1. Google Map custom element --------------------------------------------------- <polymer-element name="gmap-element" attributes="latt lngg"> <template> <link rel="stylesheet" href="gmap-element.css"> <style> google-map{ width:100%; height:100%; } </style> <div flex> <google-map id="google-map" latitude="{{latt}}" longitude="{{lngg}}" zoom="9" fit mapType="satellite"> <google-map-marker latitude="{{latt}}" longitude="{{lngg}}" draggable></google-map-marker> </google-map> </div> </template> <script> (function (document) { //Reference URL: http://stackoverflow.com/questions/28374352/auto-binding-dart-is-not-working-fails-with-bad-state-error Polymer('gmap-element', { publish:{ latt: 32.2167785, lngg: 76.319165 }, panMap: function(){ this.fire('pan-map', {latt: this.latt, lngg: this.lngg}) } }); })(wrap(document)); </script> </polymer-element> 2. Places custom element -------------------------------------------------- <polymer-element name="hill-station" attributes="lat lng"> <template> <link rel="stylesheet" href="hill-station.css"> <template repeat="{{location in locations}}"> <core-item icon="settings" label="{{location.name}}"> <a href="javascript:;" on-tap={{showLocation}}></a> </core-item> </template> </template> <script> (function () { Polymer('hill-station', { ready: function(){ this.locations = [ {"name" : "Dharamsala", "state": "Himachal Pradesh", "lat": 32.2167785, "lng": 76.319165}, {"name" : "Manali", "state": "Himachal Pradesh", "lat": 32.236378, "lng": 77.1871198}, {"name" : "Shimla", "state": "Himachal Pradesh", "lat": 31.0782194, "lng": 77.1590212}, {"name" : "Rudraprayag", "state": "Uttarakhand", "lat": 30.2853912, "lng": 78.9797152}, {"name" : "Kedarnath", "state": "Uttarakhand", "lat": 30.7344815, "lng": 79.0669351}, {"name" : "Auli", "state": "Uttarakhand", "lat": 30.9494166, "lng": 77.7478028}, {"name" : "Darjeeling", "state": "West Bengal", "lat": 27.0331949, "lng": 88.2646751}, {"name" : "Bindu", "state": "West Bengal", "lat": 27.1003216, "lng": 88.8709563}, ]; }, showLocation: function(e, detail, sender){ var loc = e.target.templateInstance.model.location; /*var myMap=document.querySelector("#app_map"); alert(myMap);*/ alert(loc.name + ". " + loc.lat + ". " + loc.lng); /*this.fire('location-selected', {lat: this.lat, lng: this.lng});*/ }, }); })(); </script> </polymer-element> 3. Index.html -------------------------------------------------- <template is="auto-binding" id="app"> <core-drawer-panel> <!-- Drawer --> <core-header-panel drawer> <!-- Drawer Toolbar --> <core-toolbar>Hill Stations of India</core-toolbar> <!-- Drawer Content --> <core-menu> <!--<user-list></user-list>--> <hill-station></hill-station> </core-menu> </core-header-panel> <!-- Main --> <core-header-panel main> <!-- Main Toolbar --> <core-toolbar> <paper-icon-button icon="menu" core-drawer-toggle></paper-icon-button> <span>{{appName}}</span> </core-toolbar> <div id="main_map_area"> <gmap-element></gmap-element> </div> </core-header-panel> </core-drawer-panel> </template> Looking forward to your suggestion as I am pretty new to the world of Polymer! Regards, Subrata Sarkar On Wednesday, 27 August 2014 18:44:47 UTC+5:30, Darshan Udayashankar wrote: > > Hi All, > > I have 2 polymer elements in which I am listing the data using repeat > option. Inside the same polymer, am using 1 more polymer element which we > need provide the option to sort and filter the list based on the selection > in the HTML Select control. > > I saw the *Communication and Message Passing *available in the Polymer > documentation, There the messages are sent from Parent Element to Child > Element. In my scenario I need to do it the other way. Based on the > selection in the client (HTML Select Control) I need to filter or sort the > list. > > Please let me know is there any Polymer alternative for HTML Select > Control and if possible please provide a link with sample which will of > great help. > > Thanks in advance. > > Regards > Darshan > > *HIPAA Confidentiality Message:* Any document(s) and/or message(s) > within this electronic transmission may contain confidential and > proprietary information that is intended only for the authorized > recipient(s). This communication belongs to the sender who is legally > privileged. If you are not the intended recipient, or if you have received > this email in error, you are hereby requested to notify the sender > immediately and delete the email and any attachment(s). Disclosure, > copying, distribution or taking action according to the content is strictly > prohibited. > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/f529259a-9672-4161-ba99-8884759e5f32%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
