How to link to static files in handlebars-django template

Question

Summary:

How do I reference static files in the handlebars part of a django template? I can use rudders if I use verbatim tags, but then I cannot use django static tag.

More details

When converting the application to Django, I came across a part that uses handelbars.js to render ajax-call-results. Via, among others, Handlebars.js in Django templates "I learned about the tag {% verbatim %} .

The simple part of the rudders works great with this. But I also have a part where images are dynamically displayed based on a result that looks something like this:

 <img src="path/{{ result }}.png"> 

Now that it works fine, if I set the path manually, I believe in Django, it is good practice to refer to your static files as follows:

 <img src="{% static 'path/file.png' %}"> 

Just getting static_url constant static_url not recommended, see, for example, this blog

Therefore, if someone does not have a real convincing reason to correct this otherwise, I believe that it is better to use the {% static %} method.

A naive solution would be to combine the 2 methods and literally spray the template with the literal / endverbatim. Besides the fact that it looks ugly, inaudible and seems like a bad idea from the very beginning, it also doesn't work.

 {% verbatim %} <!-- handlebars --> {% endverbatim %} <img src="{% static 'path{% verbatim %}{{ result }}{% endverbatim %}' %}"> {% verbatim %} <!-- handlebars --> {% endverbatim %} 

It ends in tears, as the result

TemplateSyntaxError at /
Failed to parse the remainder: '' path {% 'from' 'path {%'

Perhaps you can create the correct static server-side URL and do this. But the backend does not need to know which image we want to display in the template.

Only a solution can consist in an additional call to the backend with a "relative" string (for example, path/result.png ) on the backend and requesting the correct static link? This is not so difficult, but requires an additional call, which should not be.

So, how to reference these static files correctly?

Answer 1

You do not want to distinguish between the handle tags and the Django tags. Perhaps the purest solution is to explicitly declare handlebar tags as follows:

 {{ "handlebars_variable"|handlebars }} 

where filter handlebars is defined as ( source ):

 from django import template register = template.Library() @register.filter def handlebars(value): # str.format would require ugly escaping, so we use '%' return '{{%s}}' % value 

But this is not enough: you want to pass the handlebars tag to static and even with a filter that you cannot do directly. But maybe you could try using with :

 {% with "handlebars_variable"|handlebars as handlebars_tag %} <img src="{% static handlebars_tag %}"> {% endwith %} 

But even this is not enough. You want to add path/ . There are several options for you:

• You can use the add filter based on this answer and nested with (ugh) statements.
• You can define a template tag called setvar as you did here (if you like).

• You can define a special template tag like this (possibly inelegant):

   @register.filter def static_result_path(value): return 'result/{{%s}}' % value 

  and then change the template code to:

   <img src="{% static "handlebars_variable"|static_result_path %}"> 

• Use get_static_prefix (the easiest!):

   <img src="{% get_static_prefix %}result/{{ "handlebars_variable"|handlebars }}" /> 

• (And theres always Jinja .)

Answer 2

Although django templates do not support any escape character, they do support the templatetag tag, which allows you to insert special text in this case.

Assuming you have too many rudder permutations, you can just do something like this as needed:

 <img src="{% get_static_prefix %}path/{% templatetag openvariable %} result {% templatetag closevariable %}.png" /> 

However, if you have a lot of notes, using a custom filter according to yarthathrock's answer is more concise and probably more convenient to maintain in the end.