Google Polymer listening for fire event never happens
Question
Putting together the not fully working examples from here https://www.polymer-project.org/articles/communication.html#events
I am trying to get the addEventListener to work on a different component or dom element. If I put the listener on the submitting component it will work but going from the example if I put it on a dom element nothing happens. Having the listener on the sending element seems redundant.
I looked at data binding but I want to pass more data and really just want to build a library of working small demo bits I can reference when I need the different methods.
Thank you.
<body unresolved id="body">
<polymer-element name="say-hello" attributes="name" on-click="{{sayHi}}">
<template>Hello {{name}}!</template>
<script>
Polymer('say-hello', {
sayHi: function() {
console.log("sklngh");
this.fire('said-hello', {name: this.name});
}
});
</script>
</polymer-element>
<say-hello></say-hello>
<div id="container">zzz</div>
<script>
var container = document.querySelector('#container');
// var container = document.querySelector('say-hello');
container.addEventListener('said-hello', function(e) {
alert('outside: Said hi to ' + e.detail.name + ' from ' + e.target.localName);
});
</script>
</body>
Edit
Ah it bubbles! Needed to wrap the component.
<div id="container">
<say-hello></say-hello>
</div>
2 answers
solution1
0 2014-11-06 17:14:50
See edit above. That seems to be the answer. Kazam.
solution2
0 2016-12-13 07:20:04
To fire a custom event from the host element use the fire method. You can also pass in data to event handlers as an argument to fire.
Use this link: https://www.polymer-project.org/1.0/docs/devguide/events
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.