Combining Django Templates and Polymer

Question

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.

Answer 1

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>