Including Javascript Files in Chameleon Templates

Vincent Catalano

unread,

Apr 18, 2012, 7:19:40 PM4/18/12

to pylons-...@googlegroups.com

Each of my views has a separate template and each of these templates
extends the base template. However, each of my views uses a different
Javascript file. What is the best way to include different Javascript
files for each page using Chameleon templates? Thanks for your help!

--Vincent

Daniel Nouri

unread,

Apr 18, 2012, 7:48:53 PM4/18/12

to pylons-...@googlegroups.com, Vincent Catalano

1) A lo-fi way of doing this is to put this in your base template
where you want your <script> tags to appear:

Then in your view's template, use something like:

2) Consider putting all your scripts into a single, compressed file.
If they aren't huge, there's the benefit of not sending a HTTP request
for each one of your scripts.

3) Use something like fanstatic for when things are more complex:
http://www.fanstatic.org http://pypi.python.org/pypi/pyramid_fanstatic

Daniel

Noe Nieto

unread,

Apr 18, 2012, 7:39:04 PM4/18/12

to pylons-...@googlegroups.com

You can define a javascript/css slot in your master template and fill them in your templates.

Example of master.pt:

<html>

<head>
    <tal:comment replace="nothing">
        Various slots where you can insert elements in the header from a template.
    </tal:comment>
    <metal:styleslot define-slot="style_slot" />
    <metal:javascriptslot define-slot="javascript_head_slot" />
</head>

<body>
<! -- bla bla bla stuff -->
</body>

</html>

Example of some foo.pt

<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="en"
      xmlns:tal="http://xml.zope.org/namespaces/tal"
      xmlns:metal="http://xml.zope.org/namespaces/metal"
      metal:use-macro="master_template.macros['master']">
<head>
<metal:css fill-slot="style_slot">
<link rel="stylesheet" href="${request.static_url('spionisto.web:static/css/controlpanel.css')}" />
</metal:css>
<metal:js fill-slot="javascript_head_slot">
<script src="${request.static_url('spionisto.web:static/js/libs/jquery-1.5.1.min.js')}" type="text/javascript"></script>
<script src="${request.static_url('spionisto.web:static/js/libs/jquery.tools.min.js')}" type="text/javascript"></script>
<script src="${request.static_url('spionisto.web:static/js/viewer.js')}" type="text/javascript"></script>
</metal:js>
</head>
<body>
<metal:content fill-slot="maincontent_slot">
    <article>
      <header>
        <h2>Add camera</h2>
        <form tal:replace="structure form" />
      </header>
    </article>
</metal:content>
</body>
</html>

--
Noe

2012/4/18 Vincent Catalano <vin...@vincentcatalano.com>

--Vincent

--
You received this message because you are subscribed to the Google Groups "pylons-discuss" group.
To post to this group, send email to pylons-...@googlegroups.com.
To unsubscribe from this group, send email to pylons-discus...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/pylons-discuss?hl=en.

--
---
Noe Nieto
NNieto Consulting Services
M: nni...@noenieto.com
W: http://noenieto.com
T: @tzicatl
Li: Perfil en LinkedIn

Reply all

Reply to author

Forward