I've been stuck for the past few hours trying to figure out why the core Polymer elements are not being displayed properly in a Django application I'm making to act as a personal webpage. The application at the moment just points to an index.html page which, if you follow the tutorial on Polymer, is up to step one.
However, the components are not loading on my page. The static files are all set up correctly, and there's subtle animation from the css files being loaded correctly, but the Roboto font and the core-elements are not being displayed. Running the site as a normal HTML file does everything correctly.
Is there a specific way to user Polymer in a Django template?
Thanks.
See Eric's answer to this on the polymer-dev mailing list: https://groups.google.com/forum/?fromgroups=#!searchin/polymer-dev/django/polymer-dev/N2R8qknalOI/58ZhC1gWFh4J
Relevant excerpt:
Django 1.5 has support for the verbatim tag. You can wrap your inlined element definitions in that:
https://docs.djangoproject.com/en/1.5/ref/templates/builtins/#verbatim
Example code snippet:
{% verbatim %}
<template repeat="{{item as items}}">
<my-element name="{{item.name}}"></my-element>
</template>
{% endverbatim %}
<script>
document.querySelector("template').model = {{items}}; // items here is filled by the server's template.
</script>
I'm pretty sure this has to do with the fact that Django uses the same {{}} in its templates as Polymer.
I'm adding this answer as a compliment to the already accepted answer.
You can force django to require a space for it's template tags. So for any django template tags you have to use {{ variable }} and for polymer you will use {{variable}}.
Here is a very simple module/app I created to "prepare" django for use alongside polymer.
https://github.com/andrewebdev/django-ostinato/blob/2c435dea23319be6e9011e7381afca2b4092b5a2/ostinato/polyprep/init.py
Credit goes to https://github.com/nebrybledu for this suggestion.
Related
I have a Django Wagtail application, which employs the templating machine Jinja (or Jinja2, not entirely sure, but won't make a difference for this issue).
When I e.g. want to use the templating to show the title of a blog post, I can write
{{ post.title }}
This works perfectly fine. But I cannot enforce hyphenation in this title. If the title holds a very long word, this crashes my layout on small devices. Anyone an idea how I can tell Jinja that hyphenation should be enabled?
I want to use Django with single-page js framework and Django variable braces {{ clashes with framework delimiters. So I need to return some html file like response in my view without rendering file with any context.
I've seen that many developers make reconfiguration of delimiters in JS but may be there are more suitable approach to save Django routing?
Put the desired code between {% verbatim %} and {% endverbatim %}. This will prevent Django from rendering it. You can read more in official documentation.
It is much better to remove template rendering from this altogether. From the point of view of Django, your JS framework's templates are static files, and they should be served as such.
I am trying to integrate zinnia into a django application. I have to adept the zinnia templates into my theme. Now I am stuck, because it seems that zinnia is using the same template to build the blog entry list, and the blog entry detail page.
This is problematic because, the list has significant different html and css as the entry single view. How do I split the templates, so that I have one that is entirely for the list and one for the entry's detail (Single Post) ?
To the best of my knowledge this isn't easily done. Here is a comment on a bug asking about this very issue:
Template Documentation #383
For me I am going to modify zinnia/_entry_detail_base.html and put my list view template code in an {% if continue_reading %} and the detail template in the else branch.
I'm currently in the process of integrating the Zinnia engine into custom templates -- I'm working on a dynamically updating homepage that shows recent entries from multiple categories, custom pages for each of those categories, and then custom templates for the entries' detail views. I've found this question's answer and this explanation to be extremely helpful.
*Keep in mind that the second link is a bit dated, and that {% load zinnia_tags %} is now {% load zinnia %}.
It's still a lot of trial and error to get things adapted properly to a custom template, but Zinnia really is amazingly customizable, and I think its default configuration tends to overshadow the fact that it works brilliantly as an underlying engine that can power just about any framework that you can sketch out on a notepad.
As the documentation notes, it's also helpful to take a look at some custom themes built for Zinnia on GitHub, just to get a feel of how the template tags are implemented, and how the default templates can be overridden. Here's the repo for a Bootstrap theme, and here's one for a Foundation theme.
I'm working on my first Django project and have my templates setup with a base that all the others extend. In that base I want to have some user-specific navigation which means loading some values from the database to build the contents of a drop down menu. However I don't want to have to do this inside each view. Coming from Symfony2/Twig I would normally do this using a sub-request where I tell the template to render a view and that will use it's own template. Using syntax like:
{% render 'Bundle:Controller:action' with {} %}
How would I accomplish this same thing with Django? I've read over the docs a couple of times but can't find any way to do this.
You have two approaches:
(better)
- add the code to base.html (the one you're always extending) and only override it when you need to.
or
(worse)
- in every template use {% include %} to include your menus.html template.
Update: re-reading your question: you could modify the request in context-processor so your base.html would then have this information.
Custom template tags are what you want.
Lets say we want a library of javascript-based pieces of functionality (I'm thinking jquery):
For example:
an ajax dialog
a date picker
a form validator
a sliding menu bar
an accordian thingy
There are four pieces of code for each: some Python, CSS, JS, & HTML.
What is the best way to arrange all these pieces so that:
each javascript 'module' can be neatly reused by different views
the four bits of code that make up the completed function stay together
the css/js/html parts appear in their correct places in the response
common dependencies between modules are not repeated (eg: a javascript file in common)
x--------------
It would be nice if, or is there some way to ensure that, when called from a templatetag, the templates respected the {% block %} directives. Thus one could create a single template with a block each for CSS, HTML, and JS, in a single file. Invoke that via a templatetag which is called from the template of whichever view wants it. That make any sense. Can that be done some way already? My templatetag templates seem to ignore the {% block %} directives.
x--------------
There's some very relevant gasbagging about putting such media in forms here http://docs.djangoproject.com/en/dev/topics/forms/media/ which probably apply to the form validator and date picker examples.
Been a while since I posted this problem. What I've been doing to solve it is:
write the javascript parts you need as a library which is served statically
call the routines in the static library from the template with your server side values
Restraint is required to write it in such a way that it acts as a client side script only; don't be tempted to try and inject values from the server at the time of serving the js. Ultimately I've found it less confusing to apply server side variables strictly in the html template.
In this way I'm able to:
keep the javascript selectors on html tags inside the same file (ie: the template)
avoid templatetags altogether
re-use each javascript library in different places, and
keep the css/js/html pieces in all the places where they're expected to be found
It's not perfect, but it's getting me by till a neater idea comes along.
For example a js library in "media/js/alertlib.js" might include:
function click_alert(selector, msg){
$(selector).click(function(){ alert(msg) })
}
and the template has:
<script type="text/javascript" src="media/js/alertlib.js"></script>
<script type="text/javascript">
click_alert('#clickme', {% message %})
</script>
<div id='clickme'>Click Me</div>
If more than one page uses a given JS file you should consider concatenating all of them together and minifying the result. This reduces net connects which will improve overall page load time. Don't forget to bump your expire time out to at least a week or two.
Have a look at Django Sekizai that has been created for just that purpose.
I think you are going to have a hard time keeping all four pieces together and applying them in a fell swoop - simply because some appear in your <head> tags and others in the <body> tags.
What have done is made sure that jQuery is loaded for all pages on my base.html (as well as my base css file) ... then, I have block tags for {% block css %} and {% block js %}. Templates that inherit the base.html file can supply their own javascript and css (and only the stuff that is needed).
I have created some template tags that create ajax functions whose output is based on the object being displayed (for example, including the object_id) -- which cuts down on re-coding.
One thing I haven't tried but am interested in is django-compress.