Mẫu jQuery - tôi nên đặt chúng ở đâu?

Question

Hiện tại tôi có một trang html duy nhất có 4 mẫu trong đó và sẽ có nhiều mẫu hơn. Có thể đặt các mẫu trong các tệp khác nhau và "nhập" chúng vào không? Tôi có thể định nghĩa chúng trong tệp .js không?

Tôi đang sử dụng plugin mẫu jQquery: http://api.jquery.com/category/plugins/templates/

Mã của tôi trông giống như ví dụ!

Answer 1

tôi đều đồng ý với spin của câu trả lời này: Where to keep html templates? Bạn đã làm đúng các bởi vì nguyên tắc KISS.

Tùy thuộc vào số lượng mẫu bạn sẽ kết thúc (bạn đã đề cập "nhiều hơn"), bạn có thể muốn tách chúng ra khỏi trang chính của bạn. Có một vài lý do cho việc này.

Một lý do nữa sẽ là nguyên tắc KISS. Quá nhiều mẫu có thể làm cho mã nguồn của bạn khó điều hướng. Trình soạn thảo hoặc IDE của bạn có thể đã bao gồm bạn về điều này rồi. Nếu không, đây có thể là lý do chính đáng để đưa mẫu của bạn vào các tệp riêng biệt.

Lý do khác sẽ là hiệu suất. Nếu bạn tự phục vụ tệp HTML, không có mẫu, trang của bạn sẽ đến khách hàng và bắt đầu hiển thị sớm hơn nhiều. Bạn cũng có thể cho phép ứng dụng lưu trữ một số mẫu và chỉ tải các mẫu mới khi chúng thay đổi. Điều này sẽ khiến các lần truy cập trang web của bạn trong tương lai khởi chạy nhanh hơn nhiều.

Nếu hiệu suất đặc biệt quan trọng, bạn có thể xem xét một hỗn hợp của hai cách tiếp cận. Bạn sẽ bao gồm các mẫu thiết yếu, những mẫu mà tập hợp cấu trúc cơ bản của trang của bạn, trong trang HTML chính.Sau đó, các mẫu tùy chọn có thể được tìm nạp sau khi tải trang và/hoặc ngay trước khi chúng cần thiết. Để bao gồm các mẫu thiết yếu, bạn có thể sử dụng khuôn mẫu phía máy chủ.

Về câu hỏi ban đầu của bạn, về nơi lưu trữ chúng, tôi nói rằng bạn nên đặt chúng ở bất cứ đâu hợp lý với bạn. Sau đó, xem Dave Ward's article on using external templates with jQuery templates để biết thông tin về cách tạo và tìm nạp mẫu của bạn. Đây là đoạn mã cần thiết:

// Asynchronously our PersonTemplate's content. 
$.get('PersonTemplate.htm', function(template) { 

    // Use that stringified template with $.tmpl() and 
    // inject the rendered result into the body. 
    $.tmpl(template, person).appendTo('body'); 
}); 

Sau đó, xem An Introduction to jQuery Templates, by Stephen Walther và chuyển đến phần có tiêu đề "Mẫu từ xa". Anh ta có một ví dụ trong đó lấy và biên dịch mẫu chỉ một lần, nhưng làm cho nó có thể hiển thị nhiều lần. Dưới đây là các đoạn trích thiết yếu:

// Get the remote template 
$.get("ProductTemplate.htm", null, function (productTemplate) { 

    // Compile and cache the template 
    $.template("productTemplate", productTemplate); 

    // Render the products 
    renderProducts(0); 
}); 

function renderProducts() { 
    // Get page of products 
    var pageOfProducts = products.slice(pageIndex * 5, pageIndex * 5 + 5); 

    // Used cached productTemplate to render products 
    $.tmpl("productTemplate", pageOfProducts).appendTo("#productContainer"); 
} 

Answer 2

Check-out này Stack Overflow Câu hỏi, có rất nhiều ví dụ ở đây EDIT: có thể lỗi thời Recommended JavaScript HTML template library for JQuery?

Ngoài ra, đây là một bài viết gần đây về việc sử dụng bên ngoài mẫu file: http://encosia.com/2010/10/05/using-external-templates-with-jquery-templates/

Answer 3

tôi không biết nếu điều này sẽ giúp đỡ nếu bạn không sử dụng .NET. Nhưng tôi có cùng một vấn đề và tôi đã viết một số mã để làm việc đó:

http://htmldeploy.codeplex.com/SourceControl/changeset/view/228d0905a46b#src%2fHtmlDeploy%2fJqueryTemplate.cs

điều này về cơ bản chỉ đi vào một con đường và sao chép và dán tất cả các file html và kèm theo các loại script = "text/x-jquery-tmpl " một phần trên đó.

Nếu bạn cần điều này là thậm chí tự động thêm, dưới đây là một số mã khác có gắn thêm các mẫu để các cơ thể của một tập tin html/aspx:

http://htmldeploy.codeplex.com/SourceControl/changeset/view/228d0905a46b#src%2fHtmlDeploy%2fMasterPage.cs

tôi không thích phương thức mẫu bên ngoài vì số lượng yêu cầu HTTP cần thiết. Lý tưởng nhất, muốn nó được tải xuống một lần trên trang và tôi có thể quên các mẫu. Nếu bạn đang sử dụng Asp.net, bạn có thể đặt này trong MasterPage :)

Hy vọng nó sẽ giúp

Chí