This is a pre-production deployment of Warehouse, however changes made here WILL affect the production instance of PyPI.
Latest Version Dependencies status unknown Test status unknown Test coverage unknown
Project Description

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 %}.

Installing

First, you must do:

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

Generating js templates

Once you have the JsJinja extension installed, you have to generate the js templates:

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

Or just converting all

print jinja_env.jsjinja.generate_all()

Or using the command line utility

jsjinja <templates>

Rendering the js templates

For start using the templates you must include the jinja2.runtime.js script:

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

After you have included jinja2.runtime.js and the generated js templates, then

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

Examples

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

Testing

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

./test.sh
Release History

Release History

0.3.1

This version

History Node

TODO: Figure out how to actually get changelog content.

Changelog content for this version goes here.

Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show More

0.3.0

History Node

TODO: Figure out how to actually get changelog content.

Changelog content for this version goes here.

Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show More

0.2.1

History Node

TODO: Figure out how to actually get changelog content.

Changelog content for this version goes here.

Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show More

0.2

History Node

TODO: Figure out how to actually get changelog content.

Changelog content for this version goes here.

Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show More

Download Files

Download Files

TODO: Brief introduction on what you do with files - including link to relevant help section.

File Name & Checksum SHA256 Checksum Help Version File Type Upload Date
jsjinja-0.3.1.tar.gz (30.4 kB) Copy SHA256 Checksum SHA256 Source Apr 24, 2013

Supported By

WebFaction WebFaction Technical Writing Elastic Elastic Search Pingdom Pingdom Monitoring Dyn Dyn DNS HPE HPE Development Sentry Sentry Error Logging CloudAMQP CloudAMQP RabbitMQ Heroku Heroku PaaS Kabu Creative Kabu Creative UX & Design Fastly Fastly CDN DigiCert DigiCert EV Certificate Rackspace Rackspace Cloud Servers DreamHost DreamHost Log Hosting