jsjinja 0.2

JsJinja: Render Jinja2 Templates in JS

JsJinja lets you use your Jinja2 templates in Javascript. It compile the Jinja2 templates to Javascript with no restrictions.

The js can be generated via command line jsjinja <template file> or through the {% jsjinja %} tag in the templates.

You can use:

• Template inheritance (Include, Extends, Blocks, super, …)

• Import

• Macros

• Tests

• Filters

• Tags

The only exception is that you cannot use custom tags like {% customtag %}{% endcustomtag %}.

pip install jsjinja

Nutshell

Here a small example of a Jinja template:

{% extends 'base.html' %}
{% block title %}Memberlist{% endblock %}
{% block content %}
  <ul>
  {% for user in users %}
    <li><a href="{{ user.url }}">{{ user.username }}</a></li>
  {% endfor %}
  </ul>
{% endblock %}

And here is the javascript compiled template:

(function() {
    Jinja2.extends(Template, Jinja2.Template);
    Jinja2.registerTemplate("readme_template.tmpl", Template);
    function Template() {return Template.__super__.constructor.apply(this, arguments);};
    Template.prototype.root = function (context) {
        var buf = "";
        var parent_template = Jinja2.getTemplate("base.html", "readme_template.tmpl");
        for (name in parent_template.blocks) {
            var parent_block = parent_template.blocks[name];
            context.blocks[name] = context.blocks[name] || [];
            context.blocks[name].push(parent_block)
        }
        buf += parent_template.root(context);
        return buf;
    }
    Template.prototype.block_content = function (context) {
        var buf = "";
        var l_users = context.resolve("users");
        buf += "\n  <ul>\n  ";
        var l_user = undefined;
        var t_1 = l_users;
        for (var t_2= 0, t_3 = t_1.length; t_2<t_3; t_2++) {
            l_user = t_1[t_2];
            buf += '\n    <li><a href="';
            buf += l_user['url'];
            buf += '">';
            buf += l_user['username'];
            buf += '</a></li>\n  ';
        }
        l_user = undefined;
        buf += "\n  </ul>\n";
        return buf;
    }
    Template.prototype.block_title = function (context) {
        var buf = "";
        buf += "Memberlist";
        return buf;
    }
    return Template;
})()

Installation

For begin using JsJinja just add jsjinja.ext.JsJinjaExtension to your Jinja2 Environment.

Example:

import jinja2
env = jinja2.Environment(extensions=['jsjinja.ext.JsJinjaExtension',])

Or:

jinja_env.add_extension('jsjinja.ext.JsJinjaExtension')

Usage

print jinja_env.jsjinja.generate('your_template.jinja2')

print jinja_env.jsjinja.generate_all()

jsjinja <templates>

<script src="https://raw.github.com/SyrusAkbary/jsjinja/master/jsjinja/lib/jinja2.runtime.min.js"></script>

html = Jinja2.getTemplate("template.html").render({}})
$('body').html(html)

Examples

Library comes with a lot of examples, you can find them in examples directory.

• Static generation

• Dynamic generation

Testing

You must have pyv8 and nose python packages installed. You can do the tests with

./test.sh

TODOs and BUGS

See: http://github.com/syrusakbary/jsjinja/issues