fire message to other element

[gertcuykens]

https://www.polymer-project.org/docs/polymer/polymer.html#fire

Can this.fire something to another element?

Example

<polymer-element name="my-hover">
          <script>
            Polymer({
                ready: function(){
                    addEventListener('my-hover', function(e) {
                        console.log(e.type, e.detail.msg);
                    });
                }
            });
          </script>
</polymer-element>

<polymer-element name="my-fire">
          <script>
            Polymer({
                test: function(){
                            this.fire('my-hover', {msg: 'hover!'})
            });
          </script>
</polymer-element>

[Pajn]

The fired event bubbled just like native DOM events so you han catch it
from everywhere by adding the eventlistener on document

On Mon, Dec 22, 2014, 02:26 Gert Cuykens notifications@github.com wrote:

https://www.polymer-project.org/docs/polymer/polymer.html#fire

Can this.fire something global to another element?

Example

<script> Polymer({ ready: function(){ addEventListener('my-hover', function(e) { console.log(e.type, e.detail.msg); }); } }); </script>

<script> Polymer({ test: function(){ this.fire('my-hover', {msg: 'hover!'}) }); </script>

—
Reply to this email directly or view it on GitHub
#1045.

[gertcuykens]

hmm ok I am missing something, can't figure it out how to do that.

<polymer-element name="my-hover">
          <script>
            Polymer({
                ready: function(){
                    document.addEventListener('my-hover', function(e) {
                        console.log(e.type, e.detail.msg);
                    });
                }
            });
          </script>
</polymer-element>

<polymer-element name="my-fire">
          <script>
            Polymer({
                test: function(){
                                var event = new CustomEvent("my-hover", { "msg": "Example of an event" });
                                document.dispatchEvent(event)
            });
          </script>
</polymer-element>

Going to make a jsbin

[gertcuykens]

lol it works http://jsbin.com/yelim :) but hang on I managed to break it in my app need some time to find the difference.

[gertcuykens]

Goddamit every freaking time I forget this <my-hover></my-hover>

[ebidel]

You can also do otherElement.fire('my-hover') directly.

Instead of addEventListener, it's more Polymeric to use declarative handlers:

<polymer-element name="my-hover" on-hover="{{onHoverHandler}}">

[gertcuykens]

ok thanks