Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Embed Javascript templates (mustache.js and more) into Django templates with minimal fuss.
Python Makefile JavaScript
Tag: 1.3.5

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
docs
jstemplate
.gitignore
.travis.yml
AUTHORS.rst
CHANGES.rst
LICENSE.txt
MANIFEST.in
README.rst
TODO.rst
requirements.txt
runtests.py
setup.py
tox.ini

README.rst

django-jstemplate

Build Status Coverage Status https://pypip.in/v/django-jstemplate/badge.png https://pypip.in/d/django-jstemplate/badge.png

A templatetag framework for easier integration of mustache.js, dust.js, handlebars.js, or other JavaScript templates with Django templates. Also will wrap your templates in elements expected for libraries such as ICanHaz.js. Django-jstemplates is extensible, so if your favorite template library is not included, it's easy to add. Inspired by django-icanhaz.

Quick Usage

(Read the full docs on Read the Docs)

Add "jstemplate" to your INSTALLED_APPS setting.

Download the templating library of your choice (I like to go straight mustache.js):

wget https://raw.github.com/janl/mustache.js/master/mustache.js
mv mustache.js app/static/libs/

app/jstemplates/main.mustache:

<div>
  <p>This is {{ name }}'s template</p>
</div>

app/templates/main.html:

{% load jstemplate %}

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
  <script src="{{ STATIC_URL }}libs/mustache.js"></script>
  <script src="{{ STATIC_URL }}libs/django.mustache.js"></script>
</head>

<body>
  <div id="dynamic-area"></div>

  {% mustachejs "main" %}

  <script>
    $(document).ready(function() {

      var $area = $('#dynamic-area')
        , template;

      template = Mustache.template('main');
      $area.html(template.render());

    });
  </script>
</body>
</html>

Rationale

The collision between Django templates' use of {{ and }} as template variable markers and mustache.js' use of same has spawned a variety of solutions. One solution simply replaces [[ and ]] with {{ and }} inside an mustachejs template tag; another makes a valiant attempt to reconstruct verbatim text within a chunk of a Django template after it has already been mangled by the Django template tokenizer.

I prefer to keep my JavaScript templates in separate files in a dedicated directory anyway, to avoid confusion between server-side and client-side templating. So this solution is essentially just an "include" tag that avoids parsing the included file as a Django template.

Enjoy!

Something went wrong with that request. Please try again.