django-mustachejs icon indicating copy to clipboard operation
django-mustachejs copied to clipboard

Embed mustache-like Javascript templates into Django templates with minimal fuss.

========================================================= NOTE: django-mustachejs is now named "django-jstemplate"!

The source is available at http://github.com/mjumbewu/django-jstemplate, and the package is at http://pypi.python.org/pypi/django-jstemplate/. Please update your references.

Migration is easy:

  • In your settings' INSTALLED_APPS, mustachejs becomes jstemplate
  • MUSTACHEJS_... settings become JSTEMPLATE_...
  • In your Django templates, {% load mustachejs %} becomes {% load jstemplate %}

That's it. If you have any issues, get in touch with me on GitHub or on Twitter @mjumbewu <http://www.twitter.com/mjumbewu>_. Thanks for using the project!

================= django-mustachejs

|build status|_

.. |build status| image:: https://secure.travis-ci.org/mjumbewu/django-mustachejs.png .. _build status: https://secure.travis-ci.org/mjumbewu/django-mustachejs

A templatetag framework for easier integration of mustache.js_ JavaScript templates with Django templates. Inspired by ICanHaz.js, django-icanhaz, and jquery.mustache_.

.. _mustache.js: http://mustache.github.com/ .. _django-icanhaz: http://github.com/carljm/django-icanhaz .. _ICanHaz.js: http://icanhazjs.com/ .. _jquery.mustache: https://github.com/AF83/jquery.mustache

NOTE: Though django-mustachejs was originally developed for mustache-style templates, it can actually be used to embed any type of client-side templates. It might be better named django-jstemplates or something like that.

Quick Usage

(Read the full docs on Read the Docs_)

.. _Read the Docs: http://django-mustachejs.readthedocs.org/en/latest/

Add "mustachejs" to your INSTALLED_APPS setting.

app/jstemplates/main.mustache::

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

app/templates/main.html::

{% load mustachejs %}

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
  <script src="{{ STATIC_URL }}mustache/js/mustache-0.3.0.js"></script>
  <script src="{{ STATIC_URL }}mustache/js/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 (from django-icanhaz_)

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 my contribution to the array of solutions is essentially just an "include" tag that avoids parsing the included file as a Django template (and for convenience, automatically wraps it in the script tag that ICanHaz.js_ expects to find it in).

Enjoy!

.. _one solution: https://gist.github.com/975505 .. _another: https://gist.github.com/629508