Thư viện mẫu HTML JavaScript được đề xuất cho JQuery? [đóng cửa]

Bất kỳ đề xuất nào về thư viện mẫu HTML nào sẽ hoạt động tốt với JQuery? Googling xuất hiện khá nhiều thư viện nhưng tôi không chắc liệu có thư viện được công nhận tốt nào có thể đứng vững trước thử thách của thời gian hay không.

Thành thật mà nói, hiện nay trò chơi thử từ phía khách hàng đang rất nóng, nhưng lại khá hoang dã.

phổ biến nhất, tôi tin rằng:

• pure : Nó chỉ sử dụng js, không phải "cú pháp" của riêng anh ấy
• ria mép : khá ổn và tốt, tôi nghe nói.
• jqote2 : cực nhanh theo jsperfs
• mẫu jquery (không dùng nữa):

có rất nhiều cái khác, nhưng bạn phải kiểm tra chúng để xem cái nào phù hợp với bạn và phong cách dự án của bạn, tốt nhất.

Cá nhân tôi gặp khó khăn với việc thêm một cú pháp và tập hợp logic mới ( trộn logic và mẫu, xin chào ?? ), và đã hoàn thành js. Mỗi một mẫu của tôi đều được lưu trữ trong tệp html của chính nó (./usersTable.row.html). Tôi chỉ sử dụng các mẫu khi nội dung ajaxing và tôi có ít tệp js "logic", một tệp cho bảng, một tệp cho div, một tệp cho danh sách. và thậm chí không phải là một cho các tùy chọn của select (nơi tôi sử dụng phương pháp khác).

Mỗi lần tôi cố gắng làm điều gì đó phức tạp hơn, tôi lại phát hiện ra mã kém rõ ràng hơn và khiến tôi mất nhiều thời gian để ổn định hơn là làm theo cách "cũ". Theo ý kiến ​​của tôi, logic trong mẫu là một điều hoàn toàn không hợp lý và việc thêm vào cú pháp của chính nó chỉ tạo thêm những lỗi rất khó theo dõi.

jTemplates

một công cụ mẫu cho JavaScript.

Plugin cho jQuery ...

Đặc trưng:

• 100% bằng JavaScript
• máy lọc tiền
• Hỗ trợ JSON
• Làm việc với Ajax
• Cho phép sử dụng mã JavaScript bên trong mẫu
• Cho phép xây dựng các mẫu xếp tầng
• Cho phép xác định các thông số trong mẫu
• Làm mới trực tiếp! - nội dung cập nhật tự động từ máy chủ ...

Có một tài liệu thảo luận hợp lý về chủ đề này ở đây , bao gồm một loạt các công cụ tạo khuôn mẫu. Tuy nhiên, không dành riêng cho jQuery.

jQuery Templates Plugin được tạo bởi Microsoft và được chấp nhận là một plugin jQuery chính thức.

Nhưng lưu ý rằng nó hiện không được dùng nữa.

Tôi sẽ kiểm tra json2html , nó không cần phải viết các đoạn mã HTML và thay vào đó dựa vào các biến đổi JSON để chuyển đổi mảng đối tượng JSON thành danh sách không có cấu trúc. Rất nhanh và sử dụng tạo DOM.

Một vài năm trước, tôi đã xây dựng IBDOM: http://ibdom.sf.net/ | Kể từ tháng 12 năm 2009, nó hỗ trợ liên kết jQuery nếu bạn lấy nó trực tiếp từ thân cây.

$("#foo").injectWith(collectionOfJavaScriptObjects);

hoặc là

$("#foo").injectWith(simpleJavaScriptObject);

Ngoài ra, bây giờ bạn có thể đặt tất cả các điểm đánh dấu "data: propName" trong thuộc tính class = "data: propName other classnames", vì vậy bạn không cần phải rải rác nội dung ứng dụng của mình với các điểm đánh dấu đó.

Tôi vẫn chưa cập nhật một loạt tài liệu trên đó để phản ánh những cải tiến gần đây của tôi, nhưng tôi đã có nhiều phiên bản khác nhau của khung này được sản xuất kể từ năm 2007.

Đối với những người hoài nghi câu hỏi này:

Trở lại thời điểm Microsoft phát minh ra IE5, cái mà chúng ta ngày nay gọi là XmlHttpRequest và mẫu "ajax", một phần của lời hứa đằng sau điều này là hoàn toàn trao đổi dữ liệu giữa trình duyệt web và máy chủ. Dữ liệu đó phải được đóng gói trong XML, bởi vì vào năm 1999/2000, XML chỉ đơn giản là rất nóng. Ngoài việc truy xuất tài liệu xml qua mạng với cơ chế gọi lại, thành phần MSXML ActiveX của MS còn hỗ trợ triển khai trước bản nháp của những gì chúng ta biết đến là XSL-T và XPath.

Việc kết hợp truy xuất HTTP / XML, XPath và XSL-T, cho phép các nhà phát triển có khả năng sáng tạo to lớn để xây dựng các "tài liệu" phong phú hoạt động như "ứng dụng", hoàn toàn là gửi và quan trọng hơn là truy xuất dữ liệu từ máy chủ.

Tại sao đây là một mẫu hữu ích? Nó phụ thuộc vào mức độ phức tạp của giao diện người dùng của bạn và mức độ bạn quan tâm đến khả năng bảo trì của nó.

Khi xây dựng một giao diện được đánh dấu ngữ nghĩa rất phong phú về mặt hình ảnh với CSS nâng cao, điều cuối cùng bạn muốn làm là chia nhỏ các phần đánh dấu thành "mini-controller / views", chỉ để bạn có thể .innerHTML một phân đoạn tài liệu vào chính tài liệu, và đây là lý do.

Một nguyên lý quan trọng để giữ cho giao diện người dùng html / css nâng cao có thể quản lý được, đó là duy trì tính hợp lệ của nó ít nhất là trong giai đoạn phát triển tích cực của nó. Nếu đánh dấu của bạn xác thực, bạn có thể tập trung vào các lỗi CSS của mình. Giờ đây, nếu các đoạn mã đánh dấu cuối cùng được đưa vào trong các giai đoạn tương tác với người dùng khác nhau, tất cả sẽ trở nên rất khó sử dụng để quản lý và toàn bộ mọi thứ trở nên giòn giã.

Ý tưởng là có tất cả các cấu trúc giao diện người dùng đánh dấu của bạn trong một tài liệu duy nhất, chỉ lấy DỮ LIỆU qua mạng và sử dụng một khuôn khổ vững chắc mà ít nhất sẽ chỉ đơn giản là đưa dữ liệu của bạn vào các cấu trúc đánh dấu và ít nhất là các cấu trúc đánh dấu sao chép mà bạn đã gắn cờ là có thể lặp lại.

Điều này có thể thực hiện được với XSL-T và XPath trong IE5 +, nhưng hầu như không có trình duyệt nào khác. Một số khung trình duyệt F / OSS đã được sử dụng với XPath nhưng nó vẫn chưa phải là thứ mà chúng ta có thể dựa vào.

Vậy điều tốt nhất tiếp theo để đạt được mô hình như vậy là gì? IBDOM. Lấy dữ liệu từ máy chủ của bạn, đưa nó vào tài liệu của bạn. một cách dễ dàng.

Bạn nên xem Javascript-Templates, đây là một công cụ mẫu nhỏ được sử dụng trong plugin Tải lên tệp jQuery nổi tiếng và được phát triển bởi cùng một tác giả, Sebastian Tschan (@blueimp)

https://github.com/blueimp/JavaScript-Templates

Làm theo hướng dẫn sử dụng do Sebastian thực hiện , chỉ cần xóa dòng này

document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);

Thay thế nó bằng cái này

$('#result').html(tmpl('tmpl-demo', data));

Đừng quên thêm thẻ kết quả div trong tệp HTML của bạn

<div id="result"></div>

Thưởng thức