Add JavaScript integration page.

Author: adamghill

example/static/css/styles.css

@@ -1,7 +1,7 @@
 div {
-    margin-top: 40px;
+  margin-top: 40px;
 }
 
 label {
-    font-weight: bold;
+  font-weight: bold;
 }

example/unicorn/components/js.py

@@ -0,0 +1,59 @@
+from django_unicorn.components import UnicornView
+
+
+class JsView(UnicornView):
+    states = (
+        "Alabama",
+        "Alaska",
+        "Arizona",
+        "Arkansas",
+        "California",
+        "Colorado",
+        "Connecticut",
+        "Delaware",
+        "Florida",
+        "Georgia",
+        "Hawaii",
+        "Idaho",
+        "Illinois",
+        "Indiana",
+        "Iowa",
+        "Kansas",
+        "Kentucky",
+        "Louisiana",
+        "Maine",
+        "Maryland",
+        "Massachusetts",
+        "Michigan",
+        "Minnesota",
+        "Mississippi",
+        "Missouri",
+        "Montana",
+        "Nebraska",
+        "Nevada",
+        "New Hampshire",
+        "New Jersey",
+        "New Mexico",
+        "New York",
+        "North Carolina",
+        "North Dakota",
+        "Ohio",
+        "Oklahoma",
+        "Oregon",
+        "Pennsylvania",
+        "Rhode Island",
+        "South Carolina",
+        "South Dakota",
+        "Tennessee",
+        "Texas",
+        "Utah",
+        "Vermont",
+        "Virginia",
+        "Washington",
+        "West Virginia",
+        "Wisconsin",
+        "Wyoming",
+    )
+
+    class Meta:
+        javascript_excludes = ("states",)

example/unicorn/templates/unicorn/js.html

@@ -0,0 +1,5 @@
+<div>
+    {% for state in states %}
+    {{ state }}
+    {% endfor %}
+</div>

example/www/templates/www/base.html

@@ -5,6 +5,20 @@
         <title>django-unicorn examples</title>
         <link rel="stylesheet" href="{% static 'css/marx.min.css' %}">
         <link rel="stylesheet" href="{% static 'css/styles.css' %}">
+        <style>
+            #menu {
+                list-style: none;
+            }
+            #menu li {
+                display: inline;
+                padding: 0 10px;
+                border-left: solid 1px black;
+            }
+            #menu li:first-child {
+                border-left: none !important;
+            }
+        </style>
+
         {% unicorn_scripts %}
     </head>
 
@@ -14,7 +28,7 @@
 
             <h1>django-unicorn</h1>
 
-            <ul>
+            <ul id="menu">
                 <li><a href="{% url 'www:index' %}">Index</a></li>
                 <li><a href="{% url 'www:template' 'text-inputs' %}">Text inputs</a></li>
                 <li><a href="{% url 'www:template' 'html-inputs' %}">Other inputs</a></li>
@@ -23,6 +37,7 @@ <h1>django-unicorn</h1>
                 <li><a href="{% url 'www:template' 'polling' %}">Polling</a></li>
                 <li><a href="{% url 'www:template' 'models' %}">Models</a></li>
                 <li><a href="{% url 'www:template' 'nested' %}">Nested components (table)</a></li>
+                <li><a href="{% url 'www:template' 'js' %}">JavaScript integration</a></li>
             </ul>
 
             {% block content %}{% endblock content %}

example/www/templates/www/js.html

@@ -0,0 +1,10 @@
+{% extends "www/base.html" %}
+{% load static unicorn %}
+
+{% block content %}
+
+<h2>JavaScript integration</h2>
+
+{% unicorn 'js' %}
+
+{% endblock content %}