Embed Javascript templates (mustache.js and more) into Django templates with minimal fuss.
Python JavaScript HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
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
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>

Running tests

To run the tests (for development), install mock and six and run:

jstemplate/tests/project/manage.py test

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!