django-templatetag-handlebars allows you to embed Handlebars.js templates in your django templates.
Most of the template tag code comes from Miguel Araujo's verbatim snippet.
pip install django-templatetag-handlebars
- Add
templatetag_handlebarsto yourINSTALLED_APPS - Add the HTML header :
{% load templatetag_handlebars %}
<head>
{% handlebars_js %}
...
</head>
- Call the template tag, and write your Handlebars template :
{% tplhandlebars "tpl-infos" %}
{{total}} {% trans "result(s)." %}
<p>{% trans "Min" %}: {{min}}</p>
<p>{% trans "Max" %}: {{max}}</p>
{% endtplhandlebars %}
- The following block with end-up in your page :
<script type="text/x-handlebars" id="tpl-infos">
{{total}} result(s).
<p>Min: {{min}}</p>
<p>Max: {{max}}</p>
<script>
- Render it, client-side, as usual using
Handlebars.jsAPI :
var properties = {
total: 10,
min: 4,
max: 5
};
var template = Handlebars.compile($('#tpl-infos').html()),
rendered = template(properties);
- Your rendered string is ready, and waiting to be inserted in your DOM :)
10 result(s). <p>Min: 4</p> <p>Max: 5</p>
A {% verbatim %} tag is available to escape a specific part. For
example, you may want a subpart of your Handlebars template to be
rendered by Django :
<script type="text/x-handlebars" id="tpl-django-form">
<form>
{% verbatim %}
{{#if id}}<h1>{{first}} {{last}}</h1>{{/if}}
{% trans "Your id is" %} {{ id }}
{% endverbatim %}
{{ yourform.as_p }}
</form>
</script>
In settings.py ensure to set the following attribute to True. This is due to Ember.js expecting a slightly different script id declaration
USE_EMBER_STYLE_ATTRS = True
The script block will be rendered like `<script type="text/x-handlebars" data-template-name="%s">`.
- Mathieu Leplatre <[email protected]>
- Miguel Araujo <https://github.com/maraujop>
- Ross Crawford-d'Heureuse <https://github.com/stard0g101>
- django-handlebars by Sergii Iavorskyi, which focuses on server-side Handlebars rendering.
- django-handlebars by Chris Vigelius, with templates in separate files, and served in one block.
- Lesser GNU Public License
Handlebars.jsis released under the MIT license - Copyright 2011 Yehuda Katz
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent