2009-11-18 24 views
10

phép nói rằng chúng ta muốn có một thư viện các mảnh javascript dựa trên các chức năng (tôi nghĩ jquery): Ví dụ:Làm cách nào để quản lý các mô-đun Javascript trong các mẫu django?

  1. một hộp thoại ajax
  2. một bảng chọn ngày
  3. một hình thức validator
  4. một thanh menu trượt
  5. một accordian thingy

có bốn mảnh mã cho mỗi: một số Python, CSS, JS, & HTML.

cách tốt nhất để sắp xếp tất cả những mảnh là gì để:

  • mỗi javascript 'module' có thể được gọn gàng tái sử dụng bởi quan điểm khác nhau
  • bốn bit mã mà tạo nên chức năng hoàn nghỉ cùng
  • css/js/phần html xuất hiện ở những nơi chính xác của họ trong việc ứng phó
  • phụ thuộc phổ biến giữa các module không được lặp đi lặp lại (ví dụ: một tập tin javascript chung)

x --------------

Sẽ tốt hơn nếu, hoặc có cách nào đó để đảm bảo rằng, khi được gọi từ templatetag, các mẫu tôn trọng khối {% %} chỉ thị. Vì vậy, người ta có thể tạo một mẫu đơn với một khối cho CSS, HTML và JS, trong một tệp duy nhất. Gọi nó thông qua một templatetag được gọi từ mẫu của bất cứ view nào muốn nó. Điều đó có ý nghĩa gì. Điều đó có thể được thực hiện một cách nào đó không? Mẫu templatetag của tôi dường như bỏ qua chỉ thị {% block%}.

x --------------

Có một số rất phù hợp gasbagging về việc đưa phương tiện truyền thông như vậy trong các hình thức ở đây http://docs.djangoproject.com/en/dev/topics/forms/media/ mà có lẽ áp dụng đối với các hình thức xác nhận và chọn ngày ví dụ.

Trả lời

6

Đã một thời gian kể từ khi tôi đăng sự cố này. Những gì tôi đã làm để giải quyết nó là:

  1. viết những phần javascript bạn cần là một thư viện mà được phục vụ tĩnh
  2. gọi các thói quen trong thư viện tĩnh từ mẫu với phía máy chủ của bạn các giá trị

Hạn chế là bắt buộc để viết nó theo cách mà nó chỉ hoạt động như một kịch bản phía máy khách; không bị cám dỗ để thử và tiêm các giá trị từ máy chủ tại thời điểm phục vụ js. Cuối cùng tôi đã tìm thấy nó ít khó hiểu để áp dụng các biến phía máy chủ nghiêm ngặt trong mẫu html.

Bằng cách này tôi có thể:

  1. giữ selectors javascript trên thẻ html bên trong cùng một tập tin (ví dụ: template)
  2. tránh templatetags hoàn toàn
  3. tái sử dụng mỗi javascript thư viện ở những nơi khác nhau, và
  4. giữ các mảnh css/js/html ở tất cả những nơi họ đang dự kiến ​​sẽ được tìm thấy

Nó không phải là hoàn hảo, nhưng nó nhận được tôi cho đến khi một ý tưởng neater đến cùng.

Ví dụ một thư viện js trong "phương tiện truyền thông/js/alertlib.js" có thể bao gồm:

function click_alert(selector, msg){ 
    $(selector).click(function(){ alert(msg) }) 
} 

và mẫu có:

<script type="text/javascript" src="media/js/alertlib.js"></script> 
<script type="text/javascript"> 
    click_alert('#clickme', {% message %}) 
</script> 

<div id='clickme'>Click Me</div> 
1

Nếu có nhiều trang sử dụng tệp JS cho trước, bạn nên xem xét ghép nối tất cả chúng với nhau và rút gọn kết quả. Điều này làm giảm các kết nối mạng mà sẽ cải thiện thời gian tải trang tổng thể. Đừng quên tăng thời gian hết hạn của bạn lên ít nhất một hoặc hai tuần.

+0

Cảm ơn Peter. Có js nén thói quen ra có mà có thể là một afterthought tiện dụng trong một phần của Middleware Response; Tuy nhiên câu hỏi này là về cách tốt nhất để đặt ra một dự án django để dễ dàng có rất nhiều javascript trong các phản ứng mà không đau đầu từ nguồn nhận được hỗn loạn. Tôi hy vọng 'bao gồm' và 'templatetags' sẽ được tham gia bằng cách nào đó. –

+1

Bạn nói đúng: Tôi đã có một cuộc trò chuyện trong đầu của tôi và chỉ cho bạn một nửa trong số đó. Chúng tôi đã thử sử dụng các mẫu 'sử dụng các mẫu để chỉ bao gồm các tệp JS cho bất kỳ trang nào', nhưng trong vòng hai lần nhấp chuột, người dùng có thể đã giảm 95% số trang đó xuống. Thay vì ăn tất cả những bản tải xuống riêng lẻ đó và phải đối phó với sự lộn xộn của việc đảm bảo mỗi trang bao gồm những thứ đúng, chúng tôi đã cố gắng đẩy tất cả vào một tệp được nối và rút gọn nó. Kết quả đáng ngạc nhiên là nhỏ và sau đó chúng tôi chỉ cần đặt thẻ liên kết trong mẫu cơ sở. Làm xong. –

+1

Tôi đồng ý với Peter ở đây - Có lẽ dễ dàng hơn khi kết nối chúng lại với nhau và cho phép người dùng tải xuống tất cả cùng một lúc. Nhìn vào tài sản django như một cách dễ dàng để quản lý việc ghép nối: https://launchpad.net/django-assets – sheats

0

Tôi nghĩ rằng bạn sẽ gặp khó khăn trong việc giữ tất cả bốn phần lại với nhau và áp dụng chúng trong một ngã swoop - đơn giản chỉ vì một số xuất hiện trong các thẻ <head> và các thẻ khác trong các thẻ <body>.

Điều đã làm được đảm bảo rằng jQuery được tải cho tất cả các trang trên base.html (cũng như tệp css cơ sở của tôi) ... sau đó, tôi có các thẻ chặn cho {% block css %}{% block js %}. Các mẫu kế thừa tệp base.html có thể cung cấp javascript và css của riêng chúng (và chỉ những thứ cần thiết).

Tôi đã tạo một số thẻ mẫu tạo các hàm ajax có đầu ra dựa trên đối tượng đang được hiển thị (ví dụ, bao gồm cả object_id) - sẽ cắt giảm mã hóa lại.

Một điều tôi chưa thử nhưng quan tâm đến là django-compress.

1

Có một cái nhìn tại Django Sekizai đã được tạo ra chỉ vì mục đích đó.

Các vấn đề liên quan