Thậm chí tốt hơn, bạn có thể vượt qua các cấu trúc dữ liệu phức tạp theo cách này mà không cần phải tranh luận nhiều. Ví dụ: nếu bạn có một đối tượng từ điển với các danh sách từ điển lồng nhau, bạn có thể chuyển trực tiếp đối tượng này vào thẻ mẫu json_script mà không cần thực hiện bất kỳ thao tác hoặc vòng lặp dữ liệu nào với json.dumps[] trước
Trong ví dụ này, tôi cần chuyển một đối tượng có nhiều thuộc tính bản đồ khác nhau và danh sách các điểm tham chiếu có độ dài thay đổi trong đó mỗi phần tử là một từ điển lồng nhau của [float, float, string, boolean]
Như bạn có thể thấy trong khung nhìn ở trên, chúng ta tạo một đối tượng có tên context và điền dữ liệu vào đó, đồng thời gửi nó dưới dạng tham số đầu tiên trong hàm template.render[]
Tạo biến trong mẫu
Bạn cũng có thể tạo các biến trực tiếp trong mẫu bằng cách sử dụng thẻ mẫu
from django.http import HttpResponse
from django.template import loader
def testing[request]:
template = loader.get_template['template.html']
context = {
'firstname': 'Linus',
}
return HttpResponse[template.render[context, request]]Thí dụ
templates/template.html
{% with firstname="Tobias" %}
Hello {{ firstname }}, how are you?
Bạn sẽ tìm hiểu thêm về các thẻ mẫu trong chương tiếp theo
Dữ liệu từ một mô hình
Ví dụ trên cho thấy một cách tiếp cận dễ dàng về cách tạo và sử dụng các biến trong một mẫu
Thông thường, hầu hết dữ liệu bên ngoài mà bạn muốn sử dụng trong mẫu đều đến từ một mẫu
Chúng ta đã tạo một mô hình trong các chương trước, được gọi là
from django.http import HttpResponse
from django.template import loader
def testing[request]:
template = loader.get_template['template.html']
context = {
'firstname': 'Linus',
}
return HttpResponse[template.render[context, request]]Để lấy dữ liệu từ mô hình
from django.http import HttpResponse
from django.template import loader
def testing[request]:
template = loader.get_template['template.html']
context = {
'firstname': 'Linus',
}
return HttpResponse[template.render[context, request]]views.py và trích xuất dữ liệu từ nó trong chế độ xem Tôi cũng mới sử dụng Django. Để làm những gì bạn muốn làm [chuyển các giá trị từ python sang js], tôi đã sử dụng các truy vấn ajax [sử dụng jquery] và sau đó thực hiện một JsonResponse cho lệnh gọi ajax. Cuộc gọi ajax sau đó xử lý dữ liệu theo yêu cầu
class InstructorDeleteView[DeleteView]:
model = Instructor
success_url = reverse_lazy['instructor_list']
template_name = 'class_management/instructor_list.html'def delete[self, request, *args, **kwargs]:
"""
Calls the delete[] method on the fetched object and then
responds to the call with the relevant data.
"""
self.object = self.get_object[]
pk = self.object.pk # Save the primary key before the object is deleted.
self.object.delete[]
data = {
'message': "Successfully deleted the instructor.",
'pk': pk,
}
return JsonResponse[data]
Sau đó, trong mẫu của bạn, bạn có thể thêm js và có lệnh gọi ajax đến chế độ xem ở trên để nó có thể nhận được JsonResponse
Có một số mã ở giữa, nhưng tôi muốn hiển thị dòng cụ thể bên dưới. Tôi đang gửi dữ liệu project_list tới cơ sở. html với kết xuất [không có json]
Tôi có thể lấy các giá trị id khi tôi viết {{ item. id }} nhưng khi tôi viết {{ item. tên }} tôi gặp lỗi *
"Truy vấn. ngoại lệ hoãn lại. Madrid không được xác định”
Ghi chú. project_list chứa dữ liệu Barcelona[id=1] và Madrid[id=2]
Bạn có biết tại sao lại xảy ra lỗi đó không và cách lấy thông tin khác như tên, địa chỉ, email, v.v. ?
*CẬP NHẬT* - Cảm ơn những người trong nhận xét đã chỉ ra rằng điều này đã tồn tại ở Django dưới dạng thẻ mẫu json_script,
Khi chúng ta muốn chuyển dữ liệu từ Django sang JavaScript, chúng ta thường nói về API, bộ nối tiếp, lệnh gọi JSON và AJAX. Điều này thường được kết hợp với sự phức tạp bổ sung khi có React hoặc Angular chạy giao diện người dùng
Nhưng đôi khi bạn muốn làm điều gì đó nhanh chóng và bẩn thỉu - vẽ biểu đồ và không bận tâm đến toàn bộ cơ sở hạ tầng ứng dụng một trang
Cách tiếp cận ngây thơ
Giả sử chúng ta có một ứng dụng Django với mô hình sau
from django.db import models
class SomeDataModel[models.Model]:
date = models.DateField[db_index=True]
value = models.IntegerField[]Và chúng ta có một
from django.views.generic import TemplateView
class SomeTemplateView[TemplateView]:
template_name = 'some_template.html'from django.views.generic import TemplateView
class SomeTemplateView[TemplateView]:
template_name = 'some_template.html'Bây giờ, chúng ta đã quyết định vẽ một biểu đồ đường đơn giản, sử dụng Biểu đồ. js và chúng tôi muốn tránh thực hiện lệnh gọi AJAX/lộ API/v.v.
Nếu chúng tôi muốn hiển thị một biểu đồ đường đơn giản trong
from django.views.generic import TemplateView
class SomeTemplateView[TemplateView]:
template_name = 'some_template.html'
Điều này sẽ tạo ra những điều sau đây
Bây giờ, nếu chúng ta muốn biểu đồ dữ liệu đến từ
from django.views.generic import TemplateView
class SomeTemplateView[TemplateView]:
template_name = 'some_template.html'from django.views.generic import TemplateView
from some_project.some_app.models import SomeDataModel
class SomeTemplateView[TemplateView]:
template_name = 'some_template.html'
def get_context_data[self, **kwargs]:
context = super[].get_context_data[**kwargs]
context['data'] = [
{
'id': obj.id,
'value': obj.value,
'date': obj.date.isoformat[]
}
for obj in SomeDataModel.objects.all[]
]
return contextVà sau đó, chúng tôi kết xuất một mảng JavaScript bằng mẫu Django
Bây giờ, cái này hoạt động, nhưng nó quá bẩn đối với sở thích của tôi
Chúng tôi không còn có JavaScript nữa mà thay vào đó là JavaScript, được trộn với các mẫu Django
Chúng tôi mất cơ hội trích xuất JavaScript sang một trang riêng. tập tin js. Chúng tôi cũng mất cơ hội chạy đẹp hơn trên JavaScript đó
Chúng ta có thể làm điều đó tốt hơn và vẫn nhanh chóng về điều đó
Tăng gia vị cho mọi thứ
Chiến lược mà chúng ta sẽ theo đuổi là
- trong chế độ xem của chúng tôi, tuần tự hóa dữ liệu qua
3 & lưu trữ dữ liệu đó trong ngữ cảnhfrom django.views.generic import TemplateView class SomeTemplateView[TemplateView]: template_name = 'some_template.html' - Kết xuất ẩn
phần tử, với thuộc tính
4 vàfrom django.views.generic import TemplateView class SomeTemplateView[TemplateView]: template_name = 'some_template.html'
5 duy nhất tương đương với dữ liệu JSON được tuần tự hóafrom django.views.generic import TemplateView class SomeTemplateView[TemplateView]: template_name = 'some_template.html' - Trong JavaScript, truy vấn div đó, đọc thuộc tính
5 và sử dụngfrom django.views.generic import TemplateView class SomeTemplateView[TemplateView]: template_name = 'some_template.html'
7 để lấy dữ liệu cần thiếtfrom django.views.generic import TemplateView class SomeTemplateView[TemplateView]: template_name = 'some_template.html'
Điều này có lợi ích là giữ cho mã JavaScript sạch mọi ngôn ngữ mẫu Django và cũng có mẫu có thể sử dụng lại để lấy dữ liệu chúng tôi cần
Nó giống như làm một AJAX dễ dàng hơn
Đây là ví dụ, theo chiến lược này
import json
from django.views.generic import TemplateView
class SomeTemplateView[TemplateView]:
template_name = 'some_template.html'
def get_context_data[self, **kwargs]:
context = super[].get_context_data[**kwargs]
context['data'] = json.dumps[
[
{
'id': obj.id,
'value': obj.value,
'date': obj.date.isoformat[]
}
for obj in SomeDataModel.objects.all[]
]
]
return contextBây giờ, chúng tôi sẽ trích xuất mã JavaScript của mình thành một tệp tĩnh có tên là
from django.views.generic import TemplateView
class SomeTemplateView[TemplateView]:
template_name = 'some_template.html'Điều này mang lại cho chúng tôi những điều sau đây
from django.views.generic import TemplateView
class SomeTemplateView[TemplateView]:
template_name = 'some_template.html'{% load static %}
Như bạn có thể thấy, điều kỳ diệu đang xảy ra trong div ẩn. Chúng tôi ẩn div để xóa nó khỏi bất kỳ bố cục nào
Tại đây, bạn có thể đặt cho nó một id thích hợp hoặc sử dụng bất kỳ phần tử HTML nào bạn thấy phù hợp
Thuộc tính
from django.views.generic import TemplateView
class SomeTemplateView[TemplateView]:
template_name = 'some_template.html'Bây giờ, cuối cùng, chúng tôi sẽ triển khai chức năng đơn giản sau để lấy và phân tích dữ liệu chúng tôi cần
function loadJson[selector] {
return JSON.parse[document.querySelector[selector].getAttribute['data-json']];
}Và với điều đó,
from django.views.generic import TemplateView
class SomeTemplateView[TemplateView]:
template_name = 'some_template.html'function loadJson[selector] {
return JSON.parse[document.querySelector[selector].getAttribute['data-json']];
}
window.onload = function [] {
var jsonData = loadJson['#jsonData'];
var data = jsonData.map[[item] => item.value];
var labels = jsonData.map[[item] => item.date];
console.log[data];
console.log[labels];
var config = {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: 'A random dataset',
backgroundColor: 'black',
borderColor: 'lightblue',
data: data,
fill: false
}
]
},
options: {
responsive: true
}
};
var ctx = document.getElementById['chart'].getContext['2d'];
window.myLine = new Chart[ctx, config];
};Một mô hình nhanh và bẩn, khi bạn chỉ muốn vận chuyển một cái gì đó. Đây là kết quả cuối cùng
tuyên bố từ chối trách nhiệm
Tôi sẽ không khuyên bạn nên sử dụng phương pháp này cho bất cứ điều gì hơn là một bằng chứng nhanh chóng và bẩn thỉu về khái niệm
Khi JavaScript của bạn bắt đầu phát triển về kích thước, sẽ rất khó để kiểm soát nó và cách tiếp cận được đề xuất là sử dụng toàn bộ SPA, sử dụng một trong những khung phổ biến [đối với chúng tôi, đó là React]