竹部落: AppEngine

2011/09/04

[Notebook] Using jQuery templates in Google AppEngine

9/04/2011 10:52:00 PM Posted by Unknown AppEngine, Django, GAE, Google, jquery, Python, templates 344 comments

jQuery is a powerful javascript library that you can improve web browser experience just add some js codes. jQuery also has a lot of useful plugin you can add. lightbox, autocomplete etc.

jQuery supports Templates plugin now that you can render HTML code very simply. Here has very detail document and tutorial. Today, i will talk about how to use jQuery templates in Google AppEngine. What is the problem using jQuery templates in Google AppEngine web application.? Braces {}.

Templates syntax.
Google AppEngine Django template.

{% for item in objs %}
 {{item}},
{% endfor %}

jQuery Templates

<script id="doclistTmp" type="text/x-jquery-tmpl">
        {{each(i, o) obj}}
        <tr class="{{if i%2== 0}}odd{{else}}even{{/if}}">
            <td> ${title}</td>
            <td>${type}</td>
            <td>${folders}</td>
        </tr>
        {{/each}}
</script>

They both use brases is problem that you will meet it if you want to use jQuery templates via ajax in Google AppEngine. Then, how to setup jQuery templates in Google AppEngine.

Step1.
Register a tag in a py file called "verbatim_templatetag.py" {{if condition}} print something{{/if}}. Tell Django don't change anything within this tag.

"""
jQuery templates use constructs like:

    {{if condition}} print something{{/if}}

This, of course, completely screws up Django templates,
because Django thinks {{ and }} mean something.

Wrap {% verbatim %} and {% endverbatim %} around those
blocks of jQuery templates and this will try its best
to output the contents with no changes.
"""

from django import template

register = template.Library()

class VerbatimNode(template.Node):

    def __init__(self, text):
        self.text = text

    def render(self, context):
        return self.text

@register.tag
def verbatim(parser, token):
    text = []
    while 1:
        token = parser.tokens.pop(0)
        if token.contents == 'endverbatim':
            break
        if token.token_type == template.TOKEN_VAR:
            text.append('{{')
        elif token.token_type == template.TOKEN_BLOCK:
            text.append('{%')
        text.append(token.contents)
        if token.token_type == template.TOKEN_VAR:
            text.append('}}')
        elif token.token_type == template.TOKEN_BLOCK:
            text.append('%}')
    return VerbatimNode(''.join(text))

Step2.
Include custom tag in your py file that you use web template

 template.register_template_library('verbatim_templatetag')

Step3.
Add you jQuery template to html page.

 {% verbatim %}
        <script id="movieTemplate" type="text/x-jquery-tmpl">
            <tr>
                <td>${posted}</td>
                <td><a href="${link}">${response_count}</a></td>
                <td>{{html content}}</td>
            </tr>
        </script>
 {% endverbatim %}

Step.4
call jQuery templates.

  $("#movieList").html($("#movieTemplate").tmpl( plurks ));

Reference

2009/05/08

App Engine TemplateSyntaxError

5/08/2009 06:17:00 AM Posted by Unknown AppEngine, Google 1 comment

from google.appengine.ext.webapp import template

def HtmlRender(self, template_file, template_values):     
temp = os.path.join(os.path.dirname(__file__),
    'templates/'+template_file)
self.response.out.write( template.render(temp, template_values) )


template_values ={
   'url' : self.request.url,
   'my_dictionary' : { 'item1' : 1, 'item2' : 2}
  }


url: {{ url }}
{% for key, value in my_dictionary.items %}
{{ item.key }} : {{ item.value }}
{% endfor %}

As you can see above code. you can app engine template to generate HTML than before generate code from within strings in the Python..

"TemplateSyntaxError: 'for' statements with five words should end in 'reversed': for key, value in my_dictionary.items".

Yes, you will get one error message. What? It looks as normal python code and seems does work. Because Google App Engine now support Django 0.96 version. If you want to receive a dictionary data type from python. You must modify Django template in HTML page.

more detail information: