Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kmturley/django-client-templates
Render same server and client templates
https://github.com/kmturley/django-client-templates
Last synced: about 2 months ago
JSON representation
Render same server and client templates
- Host: GitHub
- URL: https://github.com/kmturley/django-client-templates
- Owner: kmturley
- Created: 2015-05-14T13:49:41.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-05-22T18:32:32.000Z (over 9 years ago)
- Last Synced: 2024-05-02T00:59:44.238Z (8 months ago)
- Language: HTML
- Size: 7.7 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Django Client Templates
Example showing two examples of how to render django templates client side. Sharing the same template code between the front and backend!
* Plate - Uses a Django raw_include tag + PlateJS to re-render templates in the browser
* Angular - Uses django-angular module + AngularJS directive to re-render templates in the browser
## Installation
Ensure you have Python and Django installed using the instructions at:
https://docs.djangoproject.com/en/1.8/intro/install/
## Usage
Run the command:
python manage.py migrate
python manage.py runserver
## Plate input
{% load pages_tags %}
Django Client Templates - PlateJS
PlateJS
{% include "plate/includes/nav.html" %}
{% include "plate/includes/list.html" %}
{% raw_include "plate/includes/list.html" %}
{% raw_include "plate/includes/nav.html" %}
## Plate output
Django Client Templates - PlateJS
PlateJS
Static data 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 1
Static data 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 2
Static data 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 3
<div class="list">
{% for item in items %}
<div class="item">
<h1>{{ item.name }}</h1>
<p>{{ item.desc }}</p>
</div>
{% endfor %}
</div>
<ul class="nav">
{% for item in items %}
<li><a href="#">{{ item.name }}</a></li>
{% endfor %}
</ul>
## Angular input
{% load pages_tags %}
Django Client Templates - AngularJS
AngularJS
{% include "angular/includes/nav.html" with ng=0 %}
{% include "angular/includes/list.html" with ng=0 %}
{% include "angular/includes/nav.html" with ng=1 %}
{% include "angular/includes/list.html" with ng=1 %}
## Angular output
Django Client Templates - AngularJS
AngularJS
Static data 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 1
Static data 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 2
Static data 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 3
<ul class="nav" ng-repeat="item in items">
<li><a href="#" ng-bind="item.name">Static data 1</a></li>
<li><a href="#" ng-bind="item.name">Static data 2</a></li>
<li><a href="#" ng-bind="item.name">Static data 3</a></li>
</ul>
<div class="list" ng-repeat="item in items">
<div class="item">
<h1 ng-bind="item.name">Static data 1</h1>
<p ng-bind="item.desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 1</p>
</div>
<div class="item">
<h1 ng-bind="item.name">Static data 2</h1>
<p ng-bind="item.desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 2</p>
</div>
<div class="item">
<h1 ng-bind="item.name">Static data 3</h1>
<p ng-bind="item.desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 3</p>
</div>
</div>