Tôi khá muộn, nhưng tôi muốn ghi lại cách kết hợp và điều chỉnh các giải pháp được trình bày bởi d0ugal theo cách nào đó, nó sẽ giải quyết mẫu mã sạch hơn nhiều.
Tôi có một mô hình đại diện cho người liên hệ.
The (generic) nhằm có được một ContactPerson trông như thế này:
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}
Các mẫu sẽ hiển thị quan điểm cho rằng xử lý một ContactPerson được gọi 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 %}
Nó bao gồm hai tiểu mẫu
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>
và 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 %}
3 mẫu này sẽ được sử dụng nếu yêu cầu không phải là ajax.
Nhưng nếu yêu cầu là ajax, contcactperson_detail_view sẽ trả lại chế độ xem contcactperson_detail_view_ajax, sử dụng mẫu contactperson_detail_ajax.html để hiển thị. Và mẫu này trông giống như sau:
<h1>{{ contactperson.first_name }} {{ contactperson.family_name }}</h1>
{% include 'cms/contactperson_detail_photo.html' %}
{% include 'cms/contactperson_detail_textpane.html' %}
Vì vậy, nó sử dụng cùng một mẫu phụ nhưng không mở rộng bất kỳ thứ gì, do đó chỉ đánh dấu cần thiết được phân phối. Khi chế độ xem ajax vượt qua is_ajax = True đối với mẫu, nó có thể được sử dụng để điều chỉnh những thứ nhỏ, như thiết lập các thuộc tính id chính xác.
Không cần bộ xử lý ngữ cảnh hoặc url bổ sung.
Cuối cùng mã Javascript:
$("#contact_person_portlet a").click(function(event){
event.preventDefault();
$.ajax({
type: "GET",
url: event.target.getAttribute('href'),
success: function(msg){
overlay(msg);
}
});
});
Hy vọng rằng nó sẽ hữu ích cho một số người. Nếu vậy, xin vui lòng để lại một bình luận!
Đó là những gì tôi đã chơi xung quanh với, nhưng tại thời điểm tôi không biết javascript nhiều như tôi biết, vì vậy chỉ cần gửi các đối tượng như JSON, làm cho đối tượng javascript literals ra khỏi nó, và sau đó tablediv.innerHTML = foo ? – Joel
JSON * là * một đối tượng theo nghĩa đen vì vậy điều tốt đẹp về việc sử dụng nó trong javascript là bạn không phải làm bất cứ điều gì với nó để thực sự sử dụng nó khi bạn có nó. Tôi thích sử dụng JSON kết hợp với hệ thống templating mà tôi đã liên kết ở trên (jquery, không phải prototype, xin lỗi) vì bạn có thể chuyển JSON trở lại thẳng vào template mà bạn thiết lập và nó sẽ hoạt động. – Steerpike