tag:blogger.com,1999:blog-10846234.post7786793954250386040..comments2023-06-22T09:51:55.639+01:00Comments on BOBABLOG: Agile software development and Salesforce: Lightning Web Components - Events, and listening to your childrenRob Bailliehttp://www.blogger.com/profile/06513796097645814224noreply@blogger.comBlogger5125tag:blogger.com,1999:blog-10846234.post-90762778382249312632020-04-13T18:06:40.487+01:002020-04-13T18:06:40.487+01:00Thanks Spandan - you are, of course, correct. The...Thanks Spandan - you are, of course, correct. There is an *example* implementation of a pub-sub model provided in the example library.<br /><br />That's a fantastic model for producing de-coupled page structures, where there are necessarily global events occurring, and it's always good to know what the options are.<br /><br />This post however, is specifically about the in-built event model and how that fits together, so didn't want to talk about it and cloud the information.Rob Bailliehttps://www.blogger.com/profile/06513796097645814224noreply@blogger.comtag:blogger.com,1999:blog-10846234.post-74545412123645297312020-04-11T17:11:46.261+01:002020-04-11T17:11:46.261+01:00you can use the pub-sub model to communicate betwe...you can use the pub-sub model to communicate between 2 cmp.s that are necessarily on the same page Ref but are not nested or parent- child.Include the pubsub from the github n override the functions. <br />thx,<br />SpanDan<br />SFDC Developer,IndiaSpandan SFDChttps://www.blogger.com/profile/07508029545683300142noreply@blogger.comtag:blogger.com,1999:blog-10846234.post-29618804828623535172018-12-22T08:41:48.099+00:002018-12-22T08:41:48.099+00:00Thanks for your comments, it's fantastic of yo...Thanks for your comments, it's fantastic of you to take the time to help me out. And yes - I can't quite believe that I missed the fact that you can pass the context into bind. That is, after all, a main reason for it's existence. Once you start using fat arrow functions, it's hard to give them up! (An edit will come)<br /><br />I'll re-read the events documentation, and I'm sure to post again after some more experiments. As I wanted to get across in my post, I wasn't so sure I'd got the behaviour quite right, but I just couldn't get an event to bubble. I'm certain I'll come back to it - it looks like understanding how to use Events in LWS properly is going to be vital for building reusable and elegant components.<br /><br />Again, thanks for your comments!Rob Bailliehttps://www.blogger.com/profile/06513796097645814224noreply@blogger.comtag:blogger.com,1999:blog-10846234.post-54249631706279632672018-12-21T21:26:40.989+00:002018-12-21T21:26:40.989+00:00As for the last example, it should work just fine,...As for the last example, it should work just fine, you are just adding the bind() to the incorrect operand and you're missing the argument to the bind as well, you can do:<br /><br />this.template.querySelector('.child').addEventListener( 'valuechanged', this.handleOnValueChanged.bind(this) ) );<br /><br />We don't do anything special here, it is just regular DOM manipulation, and interaction.<br /><br />Keep in mind that this is very odd way to add a listener, the template grammar is always a lot more efficient, and so we should always favor that one.<br />Caridyhttps://www.blogger.com/profile/10273599820134688770noreply@blogger.comtag:blogger.com,1999:blog-10846234.post-517943013116150572018-12-21T21:17:31.068+00:002018-12-21T21:17:31.068+00:00Hey Rob, very good analysis, we are appreciating e...Hey Rob, very good analysis, we are appreciating each post, and we are trying to address some of your concerns, keep them coming.<br /><br />As for this particular post, I think you're missing a big portion of the event system in web components, which is the retargeting logic of events. It is documented under the "Configure Event Propagation" section:<br /><br />https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.events_propagation<br /><br />This explains how events can cross the shadow boundaries, and how components listening for certain events will perceive the event.target, which is a fundamental part of the shadow DOM semantics.Caridyhttps://www.blogger.com/profile/10273599820134688770noreply@blogger.com