# Mounting widget in raw template?

**URL:** https://meta.discourse.org/t/mounting-widget-in-raw-template/44400
**Category:** Development
**Created:** [5월 17, 2016, 7:15오후 UTC](https://meta.discourse.org/t/mounting-widget-in-raw-template/44400 "2016-05-17T19:15:56Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![joebuhlig](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joebuhlig/32/193054_2.png) [@joebuhlig](https://meta.discourse.org/u/joebuhlig)
#### Post date: [5월 17, 2016, 7:15오후 UTC](https://meta.discourse.org/t/mounting-widget-in-raw-template/44400/1 "2016-05-17T19:15:56Z")

</div>

Part of what I love about the [new widget structure](https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347) is being able to reuse code in multiple places. But I’ve run into an issue when attempting to do this for the [voting plugin](https://meta.discourse.org/t/discourse-feature-voting/40121).

I use widgets heavily on the page for an individual topic. It makes the build process much smoother. But I want to take the base parent widget I’ve built for the topic page and place it on the topic list. That would allow the user to interact with the topic from the list itself. This is easily the most common request I get for this plugin.

However, since the topic list is built using raw handlebars templates, you [can’t mount a widget there](https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347/39).

I can get this done by reopening the [topic list component](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/components/topic-list-item.js.es6) and rebuilding the entire UI but that seems a bit extreme for something seemingly simple. I’m hoping someone has an idea for how to reuse a widget on a topic list. Thoughts?

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [5월 18, 2016, 2:53오후 UTC](https://meta.discourse.org/t/mounting-widget-in-raw-template/44400/2 "2016-05-18T14:53:28Z")

</div>

Unfortunately there just is no way to do this right now. Widgets are fairly incompatible with raw handlebars.

You can put a widget outside of the raw handlebars fairly easily if you can get away with that.

---

<div class="post-metadata">

### Author: ![joebuhlig](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joebuhlig/32/193054_2.png) [@joebuhlig](https://meta.discourse.org/u/joebuhlig)
#### Post date: [5월 18, 2016, 3:58오후 UTC](https://meta.discourse.org/t/mounting-widget-in-raw-template/44400/3 "2016-05-18T15:58:03Z")

</div>

Makes sense, Robin. It gets tricky using a combination of widget decoration and plugin outlets. Since there’s no intent to port the topic list away from the raw templates (and I don’t disagree with this decision), it makes it difficult to work with the existing plugin outlets within the topic-list-item.

In my thinking, it would make sense to add a plugin outlet at the beginning of the loop in the topic-list:

[https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/topic-list.hbs#L18](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/topic-list.hbs#L18)

Since there are a number of outlets being deprecated in exchange for widgets, I don’t think it would be too much to ask for an add. I’d be happy to create the PR if this is an acceptable way of coming at this.

I know there are more than one request for functionality being added to a topic list item (liking, bookmarking, voting) and this would make that process a lot easier.

---

<div class="post-metadata">

### Author: ![joebuhlig](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joebuhlig/32/193054_2.png) [@joebuhlig](https://meta.discourse.org/u/joebuhlig)
#### Post date: [5월 24, 2016, 5:12오후 UTC](https://meta.discourse.org/t/mounting-widget-in-raw-template/44400/4 "2016-05-24T17:12:56Z")

</div>

Scratch that. It doesn’t work to add a plugin outlet there. The `tr` tag is created within [the component extension](https://github.com/discourse/discourse/blob/2d2bf4dd567d6f58087269b6d72cfa05ceead458/app/assets/javascripts/discourse/components/topic-list-item.js.es6#L5). You’d have to prepend the raw template by reopening the component and somehow injecting html, which I’m pretty sure can’t be done.

So for now, I have no solution to this. I may need to postpone this feature until the environment changes. I would create a PR to make it possible but right now I’m not even sure how to go about it.

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [5월 24, 2016, 5:30오후 UTC](https://meta.discourse.org/t/mounting-widget-in-raw-template/44400/5 "2016-05-24T17:30:00Z")

</div>

Can you explain what you’re trying to do? It’s not clear to me why you’d want to change that `tr` tag or decorate around it?

---

<div class="post-metadata">

### Author: ![joebuhlig](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joebuhlig/32/193054_2.png) [@joebuhlig](https://meta.discourse.org/u/joebuhlig)
#### Post date: [5월 24, 2016, 6:11오후 UTC](https://meta.discourse.org/t/mounting-widget-in-raw-template/44400/6 "2016-05-24T18:11:21Z")

</div>

The voting plugin makes heavy use of widgets to do pretty much everything. All of the actions to increment and decrement votes for a topic and the user as well as the UI displayed to make it all work are widgets. And I still think that’s the best way to build it as it’s extremely flexible and clear as to what’s going on.

Since the voting box that handles everything is a widget, my intent was to simply reuse that code on the topic list and make it possible to vote/unvote/super-vote from a list. This isn’t something I personally would want but I understand some of the arguments for it.

This is where I start to butt heads with the code. The template where this widget should be inserted is [a raw template](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs). I can’t mount a widget in a raw template.

So I considered adding a plugin-outlet outside the raw template in the [topic-list](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/topic-list.hbs#L19). But that means the code I mount is wrapped in a `div` outside the table row for the list item since the [the component](https://github.com/discourse/discourse/blob/2d2bf4dd567d6f58087269b6d72cfa05ceead458/app/assets/javascripts/discourse/components/topic-list-item.js.es6) that uses the raw template creates the table row.

I’m not interested in changing the `tr` but somehow need to include a widget somewhere inside it.

I hope this makes sense.

---

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [11월 15, 2018, 2:23오전 UTC](https://meta.discourse.org/t/mounting-widget-in-raw-template/44400/7 "2018-11-15T02:23:37Z")

</div>

@eviltrout It follows from this that you can’t render a component (any component) in a raw template right?

I’m trying to render the `share-popup` component in a topic list item. I could just re-create the functionality, but I’d prefer not to.

@david Any ideas?

---

<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: [11월 15, 2018, 1:53오후 UTC](https://meta.discourse.org/t/mounting-widget-in-raw-template/44400/8 "2018-11-15T13:53:57Z")

</div>

> [@angus](#):
>
> It follow from this that you can’t render a component (any component) in a raw template right?

I think you are correct there, based on all of the raw templates in core.

> [@angus](#):
>
> @david Any ideas?

I’m not sure of the exact history/reasons/implementation for raw templates, but maybe someone else from the team can chime in. (I would also be interested to know if there is a solution, or even if we can switch them to regular templates now 🤷‍♂️)

---

<div class="post-metadata">

### Author: ![joebuhlig](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joebuhlig/32/193054_2.png) [@joebuhlig](https://meta.discourse.org/u/joebuhlig)
#### Post date: [11월 15, 2018, 2:32오후 UTC](https://meta.discourse.org/t/mounting-widget-in-raw-template/44400/9 "2018-11-15T14:32:49Z")

</div>

> [@A tour of how the Widget (Virtual DOM) code in Discourse works](https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347/39):
>
> You can’t embed a widget in a raw template. But don’t worry, we aren’t going to convert the topic list over. The gains over raw rendering for that part are negligible.

Not a team member, but through my conversations with Robin on this I had the understanding that those raw templates render significantly quicker overall. It has to do with the sheer number of times the template is reused.

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [11월 16, 2018, 12:49오전 UTC](https://meta.discourse.org/t/mounting-widget-in-raw-template/44400/10 "2018-11-16T00:49:58Z")

</div>

Yes, any non-ember rendering paths were purely done for performance reasons. The code is almost always harder to follow or has major limitations (values not updating) but performs much better.

It was mainly done because [of android performance](https://eviltrout.com/2016/02/25/fixing-android-performance.html).
