Adding a bespoke raw template

Hey, I’m trying to add my own Raw template … not simply override an existing one.

Reason: trying to get rid of those nasty ember tags you get when using nested components.

… initially I assumed it would be as easy as just adding one to the templates or templates/list directory, so I went ahead and did that, only for it to silently fail (to find my template).

Perhaps I can confirm this is not supported?

Then I found this:

and this:

So I tried this:

import { addRawTemplate } from "discourse-common/lib/raw-templates";
import { compile } from "handlebars";

<---some init stuff -->

addRawTemplate('search-result-entry',  compile(`<span class='result-lala'>hello</span>`));

Only to get this:

TypeError: Handlebars.compile is undefined

image

Thanks!

Apologies if I’m doing anything wrong here …

(this is going to be super useful btw, so thank you for implementing it!)

1 Like

You should be able to add a raw template straight to the templates folder. We did so in discourse-docs. They now use the .hbr file extension, so maybe that’s where things tripped up.

6 Likes

You mean the wrapper <div> which is added to ember components by default? You can disable that by setting tagName to an empty string:

Working with ember components is way easier than raw templates, so I’d definitely recommend sticking to ember if you can.

3 Likes

Gah, I had my hbr templates in templates/components! (which is obviously wrong when you write that down)

Thanks for that example Justin! Fixed it by moving that out to templates folder, doh!

Working now!

@david ah very useful tip, thank you! I’ll leverage that too! That will allow me to retain actions, perfect.

Seems I’d vastly over complicated it, cheers!

4 Likes