Estoy bastante tarde, pero quiero documentar cómo combinar y adaptar las soluciones presentadas por d0ugal de una manera que resuelva un código de plantilla mucho más limpio.
Tengo un modelo que representa personas de contacto.
El (genérico) a fin de obtener una Persona de contacto es el siguiente:
def contcactperson_detail_view(request, name):
try:
person = ContactPerson.objects.get(slug=name)
except:
raise Http404
if request.is_ajax():
return contcactperson_detail_view_ajax(request, person)
return list_detail.object_detail(
request,
queryset = ContactPerson.objects.all(),
object_id = person.id,
template_object_name = "contactperson",
)
@render_to('cms/contactperson_detail_ajax.html')
def contcactperson_detail_view_ajax(request, person):
return {'contactperson':person, 'is_ajax':True}
La plantilla para renderizar la vista que se encarga de una Persona de contacto se llama contcactperson_detail_view.html:
{% extends "index.html" %}
{% block textpane %}
<h1 id="mainheader">{{ contactperson.first_name }} {{ contactperson.family_name }} </h1>
<div class="indentation"> </div>
{% include 'cms/contactperson_detail_photo.html' %}
<div id="text_pane">
{% include 'cms/contactperson_detail_textpane.html' %}
</div>
{% endblock %}
Incluye dos sub- plantillas
contactperson_detail_textpane.html
<p>{{ contactperson.description }}</p>
<ul>
<li>
<dl>
<dt>Email</dt>
<dd>
{{ contactperson.mail }}
</dd>
</dl>
</li>
<li>
<dl>
<dt>Contact Person for</dt>
<dd>
<ul>
{% for c in contactperson.categories.all %}
<li><a href="{% url category-view c.slug %}">{{ c }}</a></li>
{% endfor %}
</ul>
</dd>
</dl>
</li>
</ul>
y contactperson_detail_photo.html
{% with contactperson.photo.detailphoto as pic %}
{% with pic.url as pic_url %}
<div {% if not is_ajax %}id='imageContainer'{% endif %} style="float: right;padding-right:0.5em;
padding-bottom: 1em; padding-left:0.5em;clear:both;
width:{{ pic.width }}px">
<div style="width:{{ pic.width}}px">
<img style="clear:both" src="{{ pic_url }}" alt="{{ i.name }}"/>
</div>
</div>
{% endwith %}
{% endwith %}
se usarán estas 3 plantillas, si la solicitud no es ajax.
Pero si la solicitud es ajax, contcactperson_detail_view devolverá la vista contcactperson_detail_view_ajax, que utiliza la plantilla contactperson_detail_ajax.html para la representación. Y esta plantilla es el siguiente:
<h1>{{ contactperson.first_name }} {{ contactperson.family_name }}</h1>
{% include 'cms/contactperson_detail_photo.html' %}
{% include 'cms/contactperson_detail_textpane.html' %}
por lo que utiliza los mismos sub-plantillas, pero no se está extendiendo nada, por tanto, sólo es necesario el marcado entregado. Como la vista ajax pasa is_ajax = True a la plantilla, se puede usar para ajustar cosas menores, como establecer atributos de identificación correctos.
No se necesita un procesador de contexto o url-conf adicional.
Finalmente el código Javascript:
$("#contact_person_portlet a").click(function(event){
event.preventDefault();
$.ajax({
type: "GET",
url: event.target.getAttribute('href'),
success: function(msg){
overlay(msg);
}
});
});
la esperanza de que será útil para algunas personas. ¡Si es así, por favor deja un comentario!
Eso es lo que jugué, pero en ese momento no sabía tanto javascript como sé, así que simplemente envíe los objetos como JSON, cree los literales de los objetos javascript y luego tablediv.innerHTML = foo ? – Joel
JSON * * es un objeto literal por lo que el bueno de usarlo en javascript es que usted no tiene que hacer nada con ella que realmente se utilicen una vez que lo tienes. Me gusta usar JSON en conjunción con el sistema de plantillas que he vinculado anteriormente (jQuery, no prototipo, lo siento) ya que sólo puede pasar el JSON devuelto directamente a la plantilla que la configuración y va a trabajar. – Steerpike