# A tour of how the Widget (Virtual DOM) code in Discourse works

**URL:** https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347
**Category:** Development
**Created:** [29 בפברואר,‏ 2016,‏ 8:18pm UTC](https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347 "2016-02-29T20:18:39Z")
**Posts on this page:** 1
**Showing post:** 59

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [4 בספטמבר,‏ 2017,‏ 4:27pm UTC](https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347/59 "2017-09-04T16:27:53Z")

</div>

Thanks - that’ll teach me to copy stuff from core 😆

So in terms of using `dispatch` from my plugin, I have modified the parent component that contains the `post-avatar` widget, to add the dispatch line.

```plaintext
   api.modifyClass('component:scrolling-post-stream', {
     didInsertElement() {
       this._super();
       this.dispatch('whosonline:changed', 'post-avatar');
     }
   });

```

I discovered that the second argument to `dispatch` is not the name of the widget, it is in fact the `buildKey`… This presents a problem for me. I need the event to be distributed to every instance of `post-avatar`, but obviously each user’s avatar is presented differently, so assigning the same `buildKey` to all of them makes very weird things happen.

> [@eviltrout](#):
>
> Whenever a widget has state it needs a key so that the virtual dom can apply the state to the same element the next time it is repainted.

Is implementing something like this the right thing to be do? Register/deregister for the `appEvent` in the parent component, set `dirtyKeys` to the `buildKeys` that require re-rendering, then queue a re-render of the whole post stream widget?

> <https://github.com/discourse/discourse/blob/1a02f5154fc1d479524e32928f421ebd19b46f6b/app/assets/javascripts/discourse/components/scrolling-post-stream.js.es6#L244-L256>

Is there any way for me to set a wildcard `dirtyKey`, something like `post-avatar-*`?

---

_[View the full topic](https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347)._