Here is described a way to pass data from site or context object to a Javascripts easily. For each page, we create a <script> section which will include all the options in a Javascript filled in by Python code. The object is automatically created from a Python dict using JSON library.
We create the script tag in <head> section using a Grok viewlet registered there.
viewlet.py:
# -*- coding: utf-8 -*-
"""
Viewlets related to application logic.
"""
# Python imports
import json
# Zope imports
from Acquisition import aq_inner
from zope.interface import Interface
from five import grok
from zope.component import getMultiAdapter
# Plone imports
from plone.app.layout.viewlets.interfaces import IHtmlHead
# The viewlets in this file are rendered on every content item type
grok.context(Interface)
# Use templates directory to search for templates.
grok.templatedir('templates')
# The generated HTML snippet going to <head>
TEMPLATE = u"""
<script type="text/javascript">
var %(name)s = %(json)s;
</script>
"""
class JavascriptSettingsSnippet(grok.Viewlet):
""" Include dynamic Javascript code in <head>.
Include some code in <head> section which initializes
Javascript variables. Later this code can be used
by various scripts.
Useful for settings.
"""
grok.viewletmanager(IHtmlHead)
def getSettings(self):
"""
@return: Python dictionary of settings
"""
context = aq_inner(self.context)
portal_state = getMultiAdapter((context, self.request), name=u'plone_portal_state')
return {
# Pass dynamically allocated site URL to the Javascripts (virtual host monster thing)
"staticMediaURL" : portal_state.portal_url() + "/++resource++yourcompany.app",
# Some other example parameters
"schoolId" : 3,
"restService" : "http://yourserver.com:8080/rest"
}
def render(self):
"""
Render the settings as inline Javascript object in HTML <head>
"""
settings = self.getSettings()
json_snippet = json.dumps(settings)
# Use Python string template facility to produce the code
html = TEMPLATE % { "name" : "youroptions", "json" : json_snippet }
return html
![\"\"](\"https://www.feedburner.com/fb/images/pub/feed-icon16x16.png\")
Subscribe to RSS feed ![](\"https://opensourcehacker.com/wp-content/uploads/twitter-24.png\")
Follow me on Twitter
![](\"http://opensourcehacker.com/wp-content/uploads/facebook-24.png\")
Follow me on Facebook ![](\"https://opensourcehacker.com/wp-content/uploads/googleplus.png\")
Follow me Google+
