My studying notebook

2011/09/04

[Notebook] Using jQuery templates in Google AppEngine

9/04/2011 10:52:00 PM Posted by Kai-Chu Chung , , , , , , 7 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

7 comments:

  1. Gaining Python certifications will validate your skills and advance your career.
    python certification

    ReplyDelete
  2. JavaScript is the most widely deployed language in the world
    Javascript Interview Questions

    ReplyDelete
  3. Good job in presenting the correct content with the clear explanation. The content looks real with valid information. Good Work

    DevOps is currently a popular model currently organizations all over the world moving towards to it. Your post gave a clear idea about knowing the DevOps model and its importance.

    Good to learn about DevOps at this time.


    devops training in chennai | devops training in chennai with placement | devops training in chennai omr | devops training in velachery | devops training in chennai tambaram | devops institutes in chennai | devops certification in chennai | trending technologies list 2018

    ReplyDelete
  4. Great efforts put it to find the list of articles which is very useful to know, Definitely will share the same to other forums.

    Machine learning training in chennai
    machine learning with python course in Chennai
    machine learning classroom training in chennai

    ReplyDelete

  5. Great efforts put it to find the list of articles which is very useful to know, Definitely will share the same to other forums. Trending Software Technologies in 2018 | Hadoop Training in Chennai | big data Hadoop training and certification in Chennai

    ReplyDelete