Recomendados
Mais conteúdo relacionado
Destaque
Destaque (15)
Semelhante a Ajaxujme přátelé
Semelhante a Ajaxujme přátelé (13)
Ajaxujme přátelé
- 1. Ajaxujme přátelé Michal Valoušek 30.března 2011 @msgre
- 2. Ligthtalk o jednoduché implementaci Ajaxových dotazů ve frameworku Django pro pražské sdružení nenáročných matematiků
- 3. Ligthtalk o jednoduché implementaci Ajaxových dotazů ve frameworku Django pro pražské sdružení nenáročných matematiků
- 4. Dynamické změny na stránce
- 5. Dynamické změny na stránce
- 6. Dynamické změny na stránce
- 7. Proč?
- 8. Proč? • Rychlost ➞ lepší UX
- 9. Proč? • Rychlost ➞ lepší UX • Méně přenášených dat
- 10. Proč? • Rychlost ➞ lepší UX • Méně přenášených dat • Méně práce pro prohlížeč
- 11. Implementace
- 12. Implementace hodně naivní
- 13. Implementace • Pověsíme se na odkaz
- 14. Implementace • Pověsíme se na odkaz $(‘a.next’).click(function(){ $(‘#left’).load(URL); return false; });
- 15. Implementace • Pověsíme se na odkaz $(‘a.next’).click(function(){ $(‘#left’).load(URL); return false; }); • Napíšeme view a šablonu v Djangu
- 16. Realita
- 17. Mění se více než jen jeden blok
- 18. Mění se více než jen jeden blok
- 19. Mění se více než jen jeden blok
- 20. Mění se více než jen jeden blok
- 21. Realita • Mění se více než jen jeden blok
- 22. Realita • Mění se více než jen jeden blok • Složitost kódu roste
- 23. Realita • Mění se více než jen jeden blok • Složitost kódu roste • Začínáme nepříjemně vlhnout *
- 24. Realita • Mění se více než jen jeden blok • Složitost kódu roste • Začínáme nepříjemně vlhnout * * Rozumíme si že? Jakože stále častěji se porušuje princip DRY...
- 25. Co s tím
- 26. Co s tím • jQuery Taconite
- 27. Co s tím • jQuery Taconite • Zachovat view, ale pro Ajax dotazy použít jinou šablonu
- 28. Co s tím • jQuery Taconite • Zachovat view, ale pro Ajax dotazy použít jinou šablonu • nebo…
- 29. Využít sílu {% extends %}
- 30. bone.html <html> <head> … </head> <body> … </body> </html> Třívrstvá architektura šablon
- 31. bone.html <html> <head> base.html … </head> <body> {% extends “bone.html”%} … </body> {% block navigation %} </html> … {% endblock %} Třívrstvá architektura šablon
- 32. bone.html <html> <head> base.html … </head> <body> catalogue.html {% extends “bone.html”%} … </body> {% block navigation %} </html> … {% extends “base.html”%} {% endblock %} {% block content %} … {% endblock %} Třívrstvá architektura šablon
- 33. Využít sílu {% extends %}
- 34. Jak?
- 35. Třemi trpasličími změnami
- 36. Třemi trpasličími změnami šablony + view + javascript
- 37. bone.html <html> <head> base.html … </head> <body> catalogue.html {% extends “bone.html”%} … </body> {% block navigation %} </html> … {% extends “base.html”%} {% endblock %} {% block content %} … {% endblock %} 1. Drobná úprava šablon
- 38. json.html {% jsonblock %} base.html {% jsonitem "content" %} {% block content %} {% endblock %} catalogue.html {% extends “bone.html”%} {% endjsonitem %} {% block navigation %} {% endjsonblock %} … {% extends “base.html”%} {% endblock %} {% block content %} … {% endblock %} 1. Drobná úprava šablon
- 39. json.html {% jsonblock %} base.html {% jsonitem "content" %} {% block content %} {% endblock %} catalogue.html {% extends “bone.html”%} {% endjsonitem %} {% block navigation %} {% endjsonblock %} … {% extends “base.html”%} {% endblock %} {% block content %} … {% endblock %} 1. Drobná úprava šablon
- 40. json.html {% jsonblock %} base.html {% jsonitem "content" %} {% block content %} {% endblock %} catalogue.html {% extends bone_tmpl %} {% endjsonitem %} {% block navigation %} {% endjsonblock %} … {% extends “base.html”%} {% endblock %} {% block content %} … {% endblock %} 1. Drobná úprava šablon
- 41. 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’ )
- 42. 3. Javascripteček • Na sledované odkazy pověsíme vlastní obsluhu… $('#regions a').live('click', function() { return ajax_content_handler( $(this).attr('href'), ['categories'] ); }
- 43. 3. Javascripteček function 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; }
- 44. Výsledek
- 45. Po kliknutí na odkaz...
- 48. Změny v šablonách se opravují na jediném místě!
- 49. Bonus
- 50. json.html {% jsonblock %} {% jsonitem "categories" %} {% block categories %}{% endblock %} {% endjsonitem %} … {% jsonitem "content" %} {% block content %}{% endblock %} {% endjsonitem %} {% endjsonblock %}
- 51. json.html {% jsonblock %} {% jsonitem "categories" %} {% block categories %}{% endblock %} {% endjsonitem %} … {% jsonitem "content" %} {% block content %}{% endblock %} {% endjsonitem %} {% endjsonblock %}
- 52. json.html {% jsonblock %} {% jsonitem "categories" %} {% block categories %}{% endblock %} {% endjsonitem %} … {% jsonitem "content" %} {% block content %}{% endblock %} {% endjsonitem %} {% endjsonblock %}
- 53. Dýky!