Cross Communication between 2 polymer elements

[Darshan Udayashankar]

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.

[Rob Dodson]

Can you just fire an event from the select control, which the parent listens to, and then changes the sorting option

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 polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/a649b6fd-1e36-4712-b9ba-bb7a6c0645ed%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Darshan Udayashankar]

Sir,

I was trying to add listener to the select control in the Child Element but was not able to figure how to catch the event in the parent control. Can you please provide the me the example.

Thanks in Advance.

Regards

Darshan

[Thomas Amsler]

This well covered in this post:

http://www.polymer-project.org/articles/communication.html

-- Thomas

[Darshan Udayashankar]

Thanks and Regards

Darshan

[niladri...@gmail.com]

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

[Douglas Hubler]

Try this in your auto-binding template

...

  <hill-station lat="{{$.map.latt}" lng="{{$.map.llng}"></hill-station>

...

  <gmap-element id="map"></gmap-element>

..

I'm not 100% positive this works in auto-binding templates, but this works when other polymer elements. You shouldn't need events in this case when you're sharing simple values.