Ajaxujme přátelé

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



Proč?

Proč?

• Rychlost ➞ lepší UX

Proč?


• Méně přenášených dat

Proč?


• 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

Realita


• Složitost kódu roste

Realita



• Začínáme nepříjemně vlhnout *

Realita



• 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>


bone.html


base.html {% extends “bone.html”%} {% block navigation %} … {% endblock %}


bone.html



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







json.html{% jsonblock %} {% jsonitem "content" %} {% block content %} {% endblock %} {% endjsonitem %}

{% endjsonblock %}




{% endjsonblock %}



{% endjsonblock %}



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 %}



…


{% endjsonblock %}



…


{% endjsonblock %}

Dýky!

Date post:	05-Jul-2015
Category:	Technology
Upload:	michal-valousek
View:	506 times
Download:	0 times

Ajaxujme přátelé

Technology