Post on 05-Jul-2015
description
transcript
Ajaxujme přátelé
Michal Valoušek@msgre
30.března 2011
Ligthtalk o jednoduché implementaci Ajaxových dotazů
ve frameworku Django pro pražské sdružení
nenáročných matematiků
Ligthtalk o jednoduché implementaci Ajaxových dotazů
ve frameworku Django pro pražské sdružení
nenáročných matematiků
Dynamické změny na stránce
Dynamické změny na stránce
Dynamické změny na stránce
Proč?
Proč?
• Rychlost ➞ lepší UX
Proč?
• Rychlost ➞ lepší UX
• Méně přenášených dat
Proč?
• Rychlost ➞ lepší UX
• Méně přenášených dat
• Méně práce pro prohlížeč
Implementace
Implementacehodně naivní
Implementace
• Pověsíme se na odkaz
• Pověsíme se na odkaz$(‘a.next’).click(function(){ $(‘#left’).load(URL); return false;});
Implementace
• Pověsíme se na odkaz$(‘a.next’).click(function(){ $(‘#left’).load(URL); return false;});
• Napíšeme view a šablonuv Djangu
Implementace
Realita
Mění se více než jen jeden blok
Mění se více než jen jeden blok
Mění se více než jen jeden blok
Mění se více než jen jeden blok
• Mění se více než jen jeden blok
Realita
• Mění se více než jen jeden blok
• Složitost kódu roste
Realita
• Mění se více než jen jeden blok
• Složitost kódu roste
• Začínáme nepříjemně vlhnout *
Realita
• Mění se více než jen jeden blok
• Složitost kódu roste
• Začínáme nepříjemně vlhnout *
Realita
* Rozumíme si že? Jakože stále častěji se porušuje princip DRY...
Co s tím
• jQuery Taconite
Co s tím
• jQuery Taconite
• Zachovat view, ale pro Ajax dotazy použít jinou šablonu
Co s tím
• jQuery Taconite
• Zachovat view, ale pro Ajax dotazy použít jinou šablonu
• nebo…
Co s tím
Využít sílu{% extends %}
Třívrstvá architektura šablon
bone.html
<html> <head> … </head> <body> … </body> </html>
Třívrstvá architektura šablon
bone.html
<html> <head> … </head> <body> … </body> </html>
base.html {% extends “bone.html”%} {% block navigation %} … {% endblock %}
Třívrstvá architektura šablon
bone.html
<html> <head> … </head> <body> … </body> </html>
base.html {% extends “bone.html”%} {% block navigation %} … {% endblock %}
catalogue.html {% extends “base.html”%} {% block content %} … {% endblock %}
Využít sílu{% extends %}
Jak?
Třemi změnamitrpasličími
Třemi změnamišablony + view + javascript
trpasličími
1. Drobná úprava šablon
bone.html
<html> <head> … </head> <body> … </body> </html>
base.html {% extends “bone.html”%} {% block navigation %} … {% endblock %}
catalogue.html {% extends “base.html”%} {% block content %} … {% endblock %}
1. Drobná úprava šablon
base.html {% extends “bone.html”%} {% block navigation %} … {% endblock %}
catalogue.html {% extends “base.html”%} {% block content %} … {% endblock %}
json.html{% jsonblock %} {% jsonitem "content" %} {% block content %} {% endblock %} {% endjsonitem %}
{% endjsonblock %}
1. Drobná úprava šablon
catalogue.html {% extends “base.html”%} {% block content %} … {% endblock %}
json.html{% jsonblock %} {% jsonitem "content" %} {% block content %} {% endblock %} {% endjsonitem %}
{% endjsonblock %}
base.html {% extends “bone.html”%} {% block navigation %} … {% endblock %}
json.html{% jsonblock %} {% jsonitem "content" %} {% block content %} {% endblock %} {% endjsonitem %}
{% endjsonblock %}
1. Drobná úprava šablon
catalogue.html {% extends “base.html”%} {% block content %} … {% endblock %}
base.html {% extends bone_tmpl %} {% block navigation %} … {% endblock %}
{% extends bone_tmpl %}
2. µ-změna view def catalogue(request): … context_dict = { … ‘bone_tmpl’: ‘json.html‘ if request.is_ajax() \ else ‘bone.html’ } … return render_to_response( 'catalogue.html', context_dict, context_instance = RequestContext(request), mimetype = ‘application/json’ if request.is_ajax() \ else ‘text/html’ )
3. Javascripteček
• Na sledované odkazy pověsíme vlastní obsluhu…
$('#regions a').live('click', function() { return ajax_content_handler( $(this).attr('href'), ['categories'] ); }
3. Javascriptečekfunction ajax_content_handler(url, exclude) { $.getJSON(url, function(data) { var cufonize_it = false; // navigace 1st level -- kategorie if ($.inArray('categories', exclude) == -1) { $('#categories').replaceWith(data.categories); cufonize_it = true; } // <title>...</title> $('title').empty().append(data.title) // udrzba... if (cufonize_it) do_cufonize(); } return false;}
Výsledek
Po kliknutí na odkaz...
...získáváme namísto HTML...
… JSON strukturu!
Změny v šablonách se opravují na jediném místě!
Bonus
json.html{% jsonblock %}
{% jsonitem "categories" %} {% block categories %}{% endblock %} {% endjsonitem %}
…
{% jsonitem "content" %} {% block content %}{% endblock %} {% endjsonitem %}
{% endjsonblock %}
json.html{% jsonblock %}
{% jsonitem "categories" %} {% block categories %}{% endblock %} {% endjsonitem %}
…
{% jsonitem "content" %} {% block content %}{% endblock %} {% endjsonitem %}
{% endjsonblock %}
json.html{% jsonblock %}
{% jsonitem "categories" %} {% block categories %}{% endblock %} {% endjsonitem %}
…
{% jsonitem "content" %} {% block content %}{% endblock %} {% endjsonitem %}
{% endjsonblock %}
Dýky!